小程序实现地图定位和拉起外部地图软件进行导航等功能实现

效果图如下

我这里实现的功能有：地图展示，标记位置，回到当前位置，点击医院地图切换到相应位置，拉起本地导航。下面就一一讲一下吧!

一、使用map展示地图

<map id="myMap" class="mapView" style="width: 100%; height: 588rpx;" latitude="{{latitude}}" longitude="{{longitude}}"
  markers="{{markers}}" scale='16' show-location="true">
  <cover-image src='../assets/local.png' class="locat" bindtap="goLocat"></cover-image>
</map>

latitude 纬度（数字）
longitude 经度（数字）
markers 标记点（数组）
scale 缩放级别，取值范围为3-20（数字）
show-location 显示带有方向的当前定位点（boolean）

更多属性查看官方文档

• cover-image 覆盖在原生组件之上的图片，我这里也就是回到当前位置的图片
  

二、使用wx.getLocation获取当前位置的经纬度

    wx.getLocation({
      type: 'gcj02', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
      isHighAccuracy: true, //开启高精度定位
      success: (res) => {
        this.setData({
          latitude: res.latitude,
          longitude: res.longitude,
        });

      },
    })

三、在地图上标记坐标点

其实有更好的写法，自己改改吧，大概就是这个意思，maplist是需要标记的数据，markers是map中的markers

    let maplist = this.data.maplist
    for (let i = 0; i < maplist.length; i++) {
      this.setData({
        markers: this.data.markers.concat({
          iconPath: "../assets/sign.png",//用来标记的图片
          id: i,
          latitude: maplist[i].lat,
          longitude: maplist[i].lng,
          width: 16,
          height: 22,
        }),
      })
    }

四、回到当前位置

  // 回到当前位置
  goLocat() {
    let mapCtx = wx.createMapContext("myMap")
    mapCtx.moveToLocation()
  },

五、点击医院使地图切换到相应位置，及地图中心点是这个医院

在点击事件里面处理，改变map中的latitude和longitude的值即可

六、使用 wx.openLocation拉起本地导航

    // 使用微信内置地图查看位置
    wx.getLocation({
      type: 'gcj02', //返回可以用于wx.openLocation的经纬度
      success: (res) => {
        wx.openLocation({
          latitude: latitude,//目的地的纬度
          longitude: longitude,//目的地的经度
          name: addr, //打开后显示的地址名称
        })
      }
    })

效果如下图：