关于在微信小程序中实现手绘地图

1.小程序已经支持手绘地图的api,即自定义图层，

以下在onready中写

this.mapCtx = wx.createMapContext('myMap')

  this.mapCtx.addGroundOverlay({
    id:1,
    src:'http://121.36.9.165:8031/smallprogram/qj/cxwqdjc.jpg',
    bounds:{
      southwest:{
           longitude:113.620003,
           latitude:24.659002
      },
      northeast:{
           longitude:113.623503,
           latitude:24.661002
      }
    },
    zIndex:99,
    success:res=>{
       console.log(res)
    }

})

手绘地图最重要的是地图坐标点与手绘图片贴合，这样后期定位导航就准确了，

首先获取地图实例，然后声明它，调用addGroundOverlay ,id必须声明，便于区分手绘图，src是图片地址，即第一层图片，bonds定义图层坐标范围，取东南-西北坐标组成一个矩形框。然后marker打点。

2.设置marker.

markers:[
  {
    iconPath: "../../images/jy.png",
    id: 1,
    latitude:24.6599861,
    longitude:113.6228055,
    width: 20,
    height: 30,
    customCallout:{
      anchorY: 0,
      anchorX: 0,
      display: 'BYCLICK'
    },
    customCallout是marker上的气泡点，可以自定义气泡
    
    <cover-view slot="callout" class="call">
      <cover-view  class="customCallout" marker-id="1" >
        <cover-view class="content"> 
           <cover-view class="tbbt">
              叠翠泉
           </cover-view>
           <cover-view>
           <cover-view class="xqs">
                根据不同的季节，百花池内的花草药材各不相同，但都是香气怡人且有着保健养生功效，对人体十分有益
           </cover-view>
           <cover-view class="tups">
              <cover-image class="icon" src="http://121.36.9.165:8031/smallprogram/qj/caoxi.jpg"></cover-image>
          </cover-view>
     </cover-view>
        </cover-view>
      </cover-view>
  </cover-view>
  
  
  
 基本功能实现了。ok.下面是效果图