一、案例效果运行小程序后页面内容从上到下橙色标题「地图组件应用示例」一块地图区域中心在黑龙江东方学院附近经度 126.660821纬度 45.572903地图上有3 个标记点「我的位置」—— 黄色标签黑字「黑龙江东方学院南门」—— 紫色标签黄字「第一学生公寓」—— 蓝色标签白字作业新增地图下方两个按钮「选择位置」和「打开位置」点「选择位置」会打开微信的地图选点界面选完后地图中心移过去点「打开位置」会调起微信内置地图可以导航或打车。二、新建项目微信开发者工具 → 新建项目 → 不使用云服务 → 不使用模板 → AppID 选测试号。建好后在项目根目录下新建一个images文件夹里面放 3 个标记图标loc01.png、loc02.png、loc03.png分别对应三个标记点的图标。三、修改 app.json关键位置权限配置{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: webview, requiredPrivateInfos: [ getLocation, chooseLocation ], permission: { scope.userLocation: { desc: 你的位置信息将用于小程序位置接口的效果展示 } }, componentFramework: glass-easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }两个必须配的东西requiredPrivateInfos列出你代码里要调用的位置接口名称。这里我们用了getLocation和chooseLocation所以都要写上。permission.scope.userLocation.desc用户拒绝位置权限时弹出来的提示文字告诉用户为什么要这个权限。注意renderer写webview不要写skyline。Skyline 渲染模式下 map 组件可能渲染不出来地图区域会空白。四、编写 index.wxml!--index.wxml-- navigation-bar titlemap组件 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle地图组件应用示例/view map idmy-map longitude{{longitude}} latitude{{latitude}} markers{{markers}} show-locationtrue / view classbtnLayout button typeprimary sizemini bind:tapchooseLocation选择位置/button button typeprimary sizemini bind:tapopenLocation打开位置/button /view /view /scroll-viewmap 组件的几个关键属性表格属性作用idmy-map地图组件 id后面要靠它操作地图longitude地图中心经度latitude地图中心纬度markers标记点数组决定地图上显示几个点、每个点在哪、长什么样show-locationtrue在地图上显示用户当前位置的小蓝点五、编写 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; }要点map组件必须给固定的width和height否则地图不会显示.btnLayout用 flex 横向排列两个按钮左右均分六、编写 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; }.box就是紫色边框的卡片容器.title是橙色大标题。七、编写 index.js核心逻辑// 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 } }, // 作业扩充新增第3个标记点 { id: 3, longitude: 126.6625, latitude: 45.5752, iconPath: /images/loc03.png, width: 32, height: 32, 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 }) } }) } })代码拆解7.1 markers 数组每个标记点是一个对象id标记点唯一 id必须是数字且不能重复longitude/latitude标记点在地图上的经纬度iconPath标记图标的路径放在 images 文件夹里width/height图标大小label标记点旁边的文字标签content显示的文字color文字颜色bgColor标签背景色fontSize文字大小7.2 chooseLocation()点击「选择位置」时调用wx.chooseLocation()会打开微信自带的地图选点页面。用户选好地址点「完成」后success回调里能拿到选中的经纬度然后用this.setData()更新页面的longitude和latitude地图就自动移到新位置了。7.3 openLocation()点击「打开位置」时分两步先调wx.getLocation()type: gcj02表示用国测局坐标系微信地图用的就是这个坐标系success回调里拿到当前位置经纬度再调wx.openLocation()把经纬度传进去就会打开微信内置地图页面用户可以点「导航」或「打车」八、自定义导航栏组件因为app.json里写了navigationStyle: custom系统导航栏被隐藏需要自己写一个导航栏组件。在components/navigation-bar/下建 4 个文件navigation-bar.json{ component: true, usingComponents: {} }navigation-bar.wxmlview classnavigation-bar stylebackground: {{background}}; color: {{color}}; view classstatus-bar styleheight: {{statusBarHeight}}px;/view view classnav-bar view classnav-back wx:if{{back}} bindtaponBack text classback-icon‹/text /view view classnav-title{{title}}/view /view /viewnavigation-bar.jsComponent({ properties: { title: { type: String, value: }, back: { type: Boolean, value: true }, color: { type: String, value: black }, background: { type: String, value: #FFF } }, data: { statusBarHeight: 20 }, lifetimes: { attached() { const sysInfo wx.getSystemInfoSync() this.setData({ statusBarHeight: sysInfo.statusBarHeight }) } }, methods: { onBack() { wx.navigateBack() } } })navigation-bar.wxss.navigation-bar { width: 100%; } .status-bar { width: 100%; } .nav-bar { height: 44px; display: flex; align-items: center; justify-content: center; position: relative; } .nav-title { font-size: 17px; font-weight: 500; } .nav-back { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; } .back-icon { font-size: 24px; }最后在pages/index/index.json里声明使用{ usingComponents: { navigation-bar: /components/navigation-bar/navigation-bar } }九、作业扩充3 个标记点老师原始案例只有 2 个标记点作业要求加第 3 个。做法很简单 —— 在data.markers数组里再 push 一个对象{ id: 3, // id 不能和前面重复 longitude: 126.6625, // 新点的经度比中心点偏东 latitude: 45.5752, // 新点的纬度比中心点偏北 iconPath: /images/loc03.png, // 新图标 width: 32, height: 32, label: { content: 第一学生公寓, // 标签文字 color: #ffffff, // 白色文字 bgColor: #0000ff, // 蓝色背景 fontSize: 20 } }经纬度怎么取可以在地图上点一下目标位置或者用腾讯地图坐标拾取器查。只要新点和前两个点经纬度不同在地图上就会显示在不同位置。十、常见问题Q地图区域一片空白A检查app.json里renderer是不是写成了skyline。Skyline 模式下 map 组件可能不渲染改成webview重新编译即可。Q点「选择位置」报错A检查app.json里requiredPrivateInfos数组里有没有写chooseLocation。没写会报权限错误。另外要在「详情 → 本地设置」里勾选不校验域名。Q标记点图标不显示A检查images文件夹里的图标文件名和代码里的iconPath路径是否一致注意大小写。Qwx.getLocation拿不到位置A模拟器里定位默认在北京如果要测试当前位置在模拟器右上角「模拟定位」里手动选一个点。总结本案例涉及的知识点map组件的基本用法longitude、latitude、markers、show-locationmarkers数组的结构id、iconPath、label 等属性wx.chooseLocation()打开微信地图选点wx.getLocation()获取当前经纬度wx.openLocation()打开微信内置地图app.json中requiredPrivateInfos和permission的位置权限配置在数组里新增一个对象来加标记点作业考点
语法分析器实战指南)
