小程序自定义marker弹出框教程

需求背景

微信小程序开发，需要使用腾讯地图显示自定义marker，并且点击marker后弹出自定义的customCallout，并且customCallout的内容为用户点击marker的时候再从后台接口获取数据。

百度了一圈后发现居然没有一篇文章可以一次性完成，可悲。

效果图如下

教程

这里使用的是【微信开发者工具】，不是uniapp。

index.wxml

<map id="myMap" style="width: 100%; height: 200px;" 
        latitude="{
  {locationObj.latitude}}" 
        longitude="{
  {locationObj.longitude}}" 
        markers="{
  {markers}}" 
        bindtap="clickMapFun"
        bindcallouttap="callouttapFun" 
        bindmarkertap="markertapFun">
        <block wx:for="{
  {markers}}" wx:key="id">
          <cover-view wx:if="{
  {show