vue 小程序地图 图片叠加 覆盖手绘地图

<map
 id="map"
 latitude="{{ latitude }}"
 longitude="{{ longitude }}"
 style="width: 100%; height:100vh;"
>
</map>

Page({
 /**
  * 页面的初始数据
  */
 data: {
   latitude: 30.580251,
   longitude: 104.277677,
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function () {
this.mapCtx = wx.createMapContext('map')
   this.mapCtx.addGroundOverlay({
     id: 0,
     src: "../image/sctu.png",
     bounds: {
       southwest: { //西南角
         latitude: 30.576161,
         longitude: 104.272544,
       },
       northeast: { //东北角
         latitude: 30.585218,
         longitude: 104.285232,
       }
     },
     success(res){
       console.log('wp', res)
     },
     fail(err){
       console.log('wperr', err)
     }
   })
 },
})

注意：目前使用MapContext.addGroundOverlay实现小程序贴图在模拟器上不显示，在手机端可显示。

补充：关于查看经纬度信息

1、进入百度地图页，底部地图开放平台。

2、导航开发文档---开发者工具---坐标拾取器。

3、移动鼠标就可以在地图上的看到任意地点的经纬度了。

4、在你需要查看的地图位置点一下，然后在右上角就可以直接复制经纬度了。