一、前言微信小程序自带map地图组件可以快速在页面渲染腾讯地图支持标记点 marker、弹窗、选点、定位、导航等功能。 本次为课程作业案例在地图上展示三个标记点位我的位置、黑龙江东方学院南门、第一学生公寓附带两个按钮功能选择位置调用wx.chooseLocation在地图拾取新位置并更新地图中心点打开位置调用wx.getLocation获取当前定位唤起地图导航页面本项目为原生微信小程序无第三方框架直接在微信开发者工具导入即可运行。二、项目文件结构pages/ └── index/ ├── index.js ├── index.wxml ├── index.wxss images/ ├── loc01.png └── loc02.png app.json app.wxss说明loc01.png、loc02.png为自定义标记图标放到 images 目录下。三、代码实现1. app.json 配置权限、页面注册{ pages: [ pages/index/index ], window: { backgroundTextStyle: light, navigationBarBackgroundColor: #fff, navigationBarTitleText: map组件, navigationBarTextStyle: black }, permission: { scope.userLocation: { desc: 用于地图定位与导航 } }, requiredPrivateInfos: [getLocation, chooseLocation] }2. index.wxml 页面结构!--index.wxml-- view classbox view classtitle地图组件应用示例/view map longitude{{longitude}} latitude{{latitude}} markers{{markers}} show-location/map view classbtnLayout button bindtapchooseLocation typeprimary选择位置/button button bindtapopenLocation typeprimary打开位置/button /view /view3. index.wxss 页面样式/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } map { margin: 20rpx 0; width: 100%; height: 700rpx; } .btnLayout { display: flex; flex-direction: row; justify-content: space-evenly; }4. app.wxss 全局样式/**app.wxss**/ .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid purple; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: #ff7d00; }5. index.js 业务逻辑核心3 个 marker 标记点// index.js Page({ data: { longitude: 126.660821, // 地图默认中心点经度 latitude: 45.572903, // 地图默认中心点纬度 markers: [{ id: 1, longitude: 126.660821, latitude: 45.572903, iconPath: /images/loc01.png, width: 28, height: 28, label: { content: 我的位置, color: #0000ff, bgColor: #ffff00, fontSize: 20 } }, { id: 2, longitude: 126.659702, latitude: 45.57112, iconPath: /images/loc02.png, width: 32, height: 32, label: { content: 黑龙江东方学院南门, color: #ffff00, bgColor: #ff00ff, fontSize: 20 } }, { id: 3, longitude: 126.662200, latitude: 45.574100, iconPath: /images/loc01.png, width: 28, height: 28, label: { content: 第一学生公寓, color: #ffffff, bgColor: #0000ff, fontSize: 20 } }] }, // 选择位置拾取地图位置更新地图中心 chooseLocation() { wx.chooseLocation({ success: (res) { console.log(res); this.setData({ longitude: res.longitude, latitude: res.latitude }) } }) }, // 获取定位打开地图导航页面 openLocation() { wx.getLocation({ type: gcj02, success: (res) { wx.openLocation({ latitude: res.latitude, longitude: res.longitude, }) } }) } })四、功能说明markers 标记点一共 3 个点位每个标记可以自定义图标、文字标签、文字颜色、背景色chooseLocation 选择位置打开地图选点器选中地点后自动移动地图中心到该位置openLocation 打开位置获取当前 GPS 定位唤起腾讯地图内置导航页面show-location地图上展示蓝色小圆点代表用户当前位置坐标系使用gcj02为腾讯地图、高德地图通用国测局坐标系。五、运行注意事项踩坑记录权限必填requiredPrivateInfos必须声明getLocation、chooseLocation否则真机调用失败开发工具勾选【地理位置】模拟权限真机调试需要开启手机定位图片路径iconPath 路径不能写错图片放在 images 文件夹经度纬度不要混用 WGS84GPS 原始坐标小程序 map 组件要求 gcj02新版本小程序定位相关接口有调整上线需要审核定位用途。六、作业拓展思路给 marker 添加点击事件点击标记点弹出提示框增加路线规划增加缩放控件、比例尺控件动态新增标记点。七、小结微信小程序 map 组件开发门槛低适合校园位置展示、门店点位、打卡地图等场景。本案例为课程标准作业满足「三个标记点 选点 导航」需求代码可以直接提交作业也可以在此基础上继续拓展。
一、前言微信小程序自带map地图组件可以快速在页面渲染腾讯地图支持标记点 marker、弹窗、选点、定位、导航等功能。 本次为课程作业案例在地图上展示三个标记点位我的位置、黑龙江东方学院南门、第一学生公寓附带两个按钮功能选择位置调用wx.chooseLocation在地图拾取新位置并更新地图中心点打开位置调用wx.getLocation获取当前定位唤起地图导航页面本项目为原生微信小程序无第三方框架直接在微信开发者工具导入即可运行。二、项目文件结构pages/ └── index/ ├── index.js ├── index.wxml ├── index.wxss images/ ├── loc01.png └── loc02.png app.json app.wxss说明loc01.png、loc02.png为自定义标记图标放到 images 目录下。三、代码实现1. app.json 配置权限、页面注册{ pages: [ pages/index/index ], window: { backgroundTextStyle: light, navigationBarBackgroundColor: #fff, navigationBarTitleText: map组件, navigationBarTextStyle: black }, permission: { scope.userLocation: { desc: 用于地图定位与导航 } }, requiredPrivateInfos: [getLocation, chooseLocation] }2. index.wxml 页面结构!--index.wxml-- view classbox view classtitle地图组件应用示例/view map longitude{{longitude}} latitude{{latitude}} markers{{markers}} show-location/map view classbtnLayout button bindtapchooseLocation typeprimary选择位置/button button bindtapopenLocation typeprimary打开位置/button /view /view3. index.wxss 页面样式/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } map { margin: 20rpx 0; width: 100%; height: 700rpx; } .btnLayout { display: flex; flex-direction: row; justify-content: space-evenly; }4. app.wxss 全局样式/**app.wxss**/ .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid purple; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: #ff7d00; }5. index.js 业务逻辑核心3 个 marker 标记点// index.js Page({ data: { longitude: 126.660821, // 地图默认中心点经度 latitude: 45.572903, // 地图默认中心点纬度 markers: [{ id: 1, longitude: 126.660821, latitude: 45.572903, iconPath: /images/loc01.png, width: 28, height: 28, label: { content: 我的位置, color: #0000ff, bgColor: #ffff00, fontSize: 20 } }, { id: 2, longitude: 126.659702, latitude: 45.57112, iconPath: /images/loc02.png, width: 32, height: 32, label: { content: 黑龙江东方学院南门, color: #ffff00, bgColor: #ff00ff, fontSize: 20 } }, { id: 3, longitude: 126.662200, latitude: 45.574100, iconPath: /images/loc01.png, width: 28, height: 28, label: { content: 第一学生公寓, color: #ffffff, bgColor: #0000ff, fontSize: 20 } }] }, // 选择位置拾取地图位置更新地图中心 chooseLocation() { wx.chooseLocation({ success: (res) { console.log(res); this.setData({ longitude: res.longitude, latitude: res.latitude }) } }) }, // 获取定位打开地图导航页面 openLocation() { wx.getLocation({ type: gcj02, success: (res) { wx.openLocation({ latitude: res.latitude, longitude: res.longitude, }) } }) } })四、功能说明markers 标记点一共 3 个点位每个标记可以自定义图标、文字标签、文字颜色、背景色chooseLocation 选择位置打开地图选点器选中地点后自动移动地图中心到该位置openLocation 打开位置获取当前 GPS 定位唤起腾讯地图内置导航页面show-location地图上展示蓝色小圆点代表用户当前位置坐标系使用gcj02为腾讯地图、高德地图通用国测局坐标系。五、运行注意事项踩坑记录权限必填requiredPrivateInfos必须声明getLocation、chooseLocation否则真机调用失败开发工具勾选【地理位置】模拟权限真机调试需要开启手机定位图片路径iconPath 路径不能写错图片放在 images 文件夹经度纬度不要混用 WGS84GPS 原始坐标小程序 map 组件要求 gcj02新版本小程序定位相关接口有调整上线需要审核定位用途。六、作业拓展思路给 marker 添加点击事件点击标记点弹出提示框增加路线规划增加缩放控件、比例尺控件动态新增标记点。七、小结微信小程序 map 组件开发门槛低适合校园位置展示、门店点位、打卡地图等场景。本案例为课程标准作业满足「三个标记点 选点 导航」需求代码可以直接提交作业也可以在此基础上继续拓展。
