登录 | 注册
小程序交流 +关注 已有0人关注 +发表新主题

小程序地图之位置标注功能

发表在 2019-3-20 18:36 来自PC 复制链接 手机看帖 扫一扫!手机看帖更爽 0 495

小程序地图之位置标注功能

小程序地图之位置标注功能
接着上一节《小程序地图之地址选择功能》介绍,本节介绍小程序地址标注功能。地图标注就是在打开的地图通过图标,文字等等标注一些特殊的地理位置,可用户可快速的找到该地方。
   地图标注主要通过地图控件的markers属性进行标识。该控制传送的是一个数组,当标注的地理位置非常多的时候,如果想要看到全部的标注点,可使用include-points,把标注的地址传进去,地图会自动缩放视野包含所有给定的坐标点。
地图标注详细过程如下:
1、  在小程序页面(.wxml )中添加地图控件。
  <view><map id="mymap" enable-zoom="true" show-location   latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}"   scale="{{scale}}" style="width: 100%;height: 100vh;">
  </map></view>
  页面效果如下:
                              

小程序地图之位置标注功能

小程序地图之位置标注功能
2、  在小程序的js文件中,添加设置地图控件需要的参数,map详细参数参考小程序文档。
  // 设置参数事件
Page({
  /**
   * 页面的初始数据
   */
  data: {
latitude: 39.9212122,//进入地图当前位置的维度
    longitude: 116.4094981,// 进入地图当前位置的经度
    scale:13,//默认地图缩放比例
    markers: [],//标注地址
  },
onLoad: function (options) {
var that=this;
    let mks = [
      {
        id: 1,//标注唯一id
        latitude: 39.9212122,// 标注维度
        longitude: 116.4094981,//标注经度
        iconPath: "../../images/map/ic_machine_blue_3x.png",//标注图标
        width: 40,//标注宽度
        height: 59,//标注高度
      },
      {
        id: 2,
        latitude: 39.5212122,
        longitude: 116.4094981,
        iconPath: "../../images/map/ic_machine_blue_3x.png",
        width: 40,
        height: 59,
      },
    ];
    //更新页面标注数据
    that.setData({
      markers: mks
    });
}
})
效果如下

小程序地图之位置标注功能

小程序地图之位置标注功能
  注意:标注的两个地理位置相差太远可能在打开时没有看到标注点,这个正常情况,想要把标注点在每次打开都可以看到,需要设置include-points属性
扫描二维码,手机查看本帖
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

返回顶部
快速回复 发贴