微信小程序 地图实现查找标记地点

1.在小程序官方文档中有一个实例可以参考

2.导入本地实现

3.小程序里面来实现一下

.wxml 文件中

<view class="page-body">
  <view class="page-section page-section-gap">
    <map
      id="myMap"
      style="width: 100%; height: 300px;"
      latitude="{{latitude}}"
      longitude="{{longitude}}"
      bindmarkertap="markertap"
      bindcallouttap="callouttap"
      bindlabeltap="labeltap"
      markers="{{markers}}"
      scale="16"
    >
      <cover-view slot="callout">
        <block wx:for="{{customCalloutMarkerIds}}" wx:key="*this">
          <cover-view  class="customCallout" marker-id="{{item}}" >
            <cover-image class="icon" src="/image/voice.png"></cover-image>
            <cover-view class="content"> 
              {{num}}-{{item}}-{{index}}
            </cover-view>
          </cover-view>
        </block>
      </cover-view>
    </map>
  </view>
</view>

 在 .wxss 中

.page-section-gap{
  box-sizing: border-box;
  padding: 0 30rpx;
}

.page-body-button {
  margin-bottom: 30rpx;
}

.customCallout {
  box-sizing: border-box;
  background-color: #fff; 
  border: 1px solid #ccc;
  border-radius: 30px;
  width: 150px;
  height: 40px;
  display: inline-flex;
  padding: 5px 20px;
  justify-content: center;
  align-items: center;
}

.circle {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 50%;
}

.icon {
  width: 16px;
  height: 16px;
}

.content {
  flex: 0 1 auto;
  margin: 0 10px;
  font-size: 14px;
}

在.js 文件中

Page({
  data: {
    latitude: 30.870915522712245,
    longitude: 121.69552166954041,
    markers: [
      {
        id: 1,
        latitude: 30.872771084672426,
        longitude: 121.69159491554261,
        iconPath: '/image/location.png',
        width:100,
        hight:100
      },
      {
        id: 2,
        latitude: 30.872941444638506,
        longitude: 121.70530636802674,
        iconPath: '/image/location.png',
        width:100,
        hight:100
      },
      {
        id: 3,
        latitude: 30.871960719601645,
        longitude: 121.68974419132233,
        iconPath: '/image/location.png',
        width:100,
        hight:100
      }
    ],
    customCalloutMarkerIds: [],
    num: 1
  },
  onReady: function (e) {
    
  },

 
  
})

实现效果

 注：这里的标记点是测试 ，实际的要根据数据库来实现