微信小程序Map地图使用详细教程，获取小程序定位，设置初始位置，设置地图初始缩放程度scale，最大，最小min-scale缩放，地图标点markers，画区域轮廓polygons，绑定地图点击事件

凉豆菌

已于 2024-08-12 10:59:25 修改

阅读量4.9k

点赞数 10

分类专栏：微信小程序文章标签：小程序微信小程序

于 2024-08-12 10:46:36 首次发布

本文链接：https://blog.csdn.net/m0_67755668/article/details/141123636

版权

微信小程序专栏收录该内容

1 篇文章

订阅专栏

在页面中引入Map组件

<map
      id="myMap"
      style="width: 100%; height: 510rpx;"
      latitude="{{latitude}}"
      longitude="{{longitude}}"
      bindtap="maptap"
      bindregionchange="bindregionchange"
      bindpoitap="maptap"
      enable-zoom="{{true}}"
      scale="{{scale}}"
      min-scale="4"
      markers="{{markers}}"
      polygons="{{polygon}}"
    >
    </map>

参数

核心： latitude，longitude表示当前显示的位置坐标，bindtap绑定地图的点击事件，bindregionchange监听地图视野变化，bindpoitap点击地图poi点时触发（处理点击地图上的某些图标或者轮廓线不触发点击事件问题），enable-zoom是否支持缩放，scale缩放等级（3~20），min-scale 、max-scale最小最大缩放等级，markers地图标点集合，polygons地图上画范围（轮廓）的集合

其他的一些参数，参考微信小程序开发文档Map

获取当前定位

1、去微信公众平台，开发-开发管理-接口设置，开通wx.getFuzzyLocation获取位置接口使用权限

2、在app.json文件中配置scope.userFuzzyLocation

	"permission":{
		"scope.userInfo":{
			"desc": "你的信息将用于小程序平台用户登录"
		},
		"scope.userFuzzyLocation": {
			"desc": "你的位置信息将用于小程序为您匹配最近的机构"
		}
     },

3、页面中使用

 // 获取当前定位
  getLocation(){
    let that = this
    wx.getFuzzyLocation({
      type: 'wgs84',
      success (res) {
        // 当前位置坐标
        const latitude = res.latitude;
        const longitude = res.longitude;
      },
      fail(err) {

      },
    })
  },

markers地图标点

markers是一个数组，可以添加一个或多个标点，数组每一项对象参数具体如下：

参数：

例如：

let obj = {
  id: 12345,
  latitude:that.data.latitude,
  longitude:that.data.longitude,
  width:30,
  height:44,
  alpha:1,
  zIndex: 6,
  callout:{
    content:`${str}(${res.data.data})`,
    display:'ALWAYS',
    padding:5,
    borderRadius:6,
    color:'#ff0000'
  }
}
this.setData({
    markers:[obj]
})

效果：

polygons地图范围画圈

polygons是一个数组，可以画一个或多个范围封闭的范围，数组每一项对象参数具体如下，其中核心就是points，是一个由一组组坐标组成的数组集合，points里的坐标点连线组成了一个封闭的区域范围：

参数：

例如：

其中p就是地图坐标点集合

arr.push({
  points: p,
  fillColor: "#4F94CD33",
  strokeColor: "#2196f3",
  strokeWidth: 2,
  zIndex: 5,
  dashArray:[5,5]
})

this.setData({
  polygon:arr
})

效果：

一个：

多个：