微信小程序实现地图定位

前言

地图定位这个功能相信大家在学习插件的时候都有过接触，那么在这篇文章中我来为大家介绍微信小程序中的地图定位功能，很简单哦

在此之前我们可以先去微信官方文档>小程序>组件>地图进行了解

点此进入小程序中map介绍

map组件提供了地图展示、交互、叠加点线面及文字等功能，同时支持个性化地图样式，可结合地图服务 API 实现更丰富功能。

1. 写一个map标签，并在其中写入经纬度属性，mark标记与点击事件

<view> 
      <map latitude="{{latitude}}" longitude="{{longitude}}" markers='{{marker}}' bindtap="click"></map>
  </view>

2.在js文件中的data声明首次加载的经纬度

data: {
    latitude: '',    //纬度
    longitude: '',    //经度
    marker:[],
}

 3.接着在onLoad生命周期中写入wx.getLocation方法

onLoad(options) {
        wx.getLocation({
          isHighAccuracy: true, 
          type: 'gcj02',
          success: (res) => {
            this.setData({
              latitude: res.latitude,
              longitude: res.longitude,
              marker: [{
                id:1,
                latitude: res.latitude,
                longitude: res.longitude,
                iconPath: '/image/401.png',
                width: '100rpx',
                height: '100rpx'
              }
              ]
            })
          }
        })
      },

这里marker里的iconPath是一个标点记号图片

                                                                                       （如右图）

4. 最后在单击事件中写入wx.openLocation方法，使用微信内置地图查看位置

 click(){
      wx.openLocation({
        latitude: this.data.latitude,
        longitude: this.data.longitude,
      })
    },

5.最后的最后我们需要在 app.json 文件中添加这么一段：

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示" 
    }
  },

如此便可实现在小程序中的地图定位功能，点击后还可进入内置详细地图（实际和实际位置会有偏差），希望对大家有帮助