微信小程序 地图标点

根据数据在地图上进行标点,

默认显示第一个数据位置为地图中心点

用swiper标签显示对应标点的数据信息

滑动swiper标签 移动地图中心点至对应位置

HTML代码: 

 <map scale="12" id="myMap" longitude="{{long}}" latitude="{{lat}}" markers="{{markers}}" show-location></map>
   //swiper 显示标点信息用的 当你滑动swiper时 让地图中心点也移动到对应的标点上
    <swiper wx:if="{{swiperList.length != 0}}" bindchange="swiperChange" circular class="slide" duration="{{duration}}">
      <block wx:for="{{swiperList}}" wx:key="*this">
        <swiper-item>
          <view class="swiper-item">
            //class="swiper-item"盒子中写想展示的样式即可
           </view>
        </swiper-item>
      </block>
    </swiper>

JavaScript代码: 

  data: {
    markers: [],//地图标点数据
    swiperList: [],//swiper数据
    //上边这俩数据列表得是对应的上的嗷,后端要是嫌费劲一个接口返给你了,那你就得自己处理了
    //我后端是给我分成了俩接口
    duration: 500, //swiper动画过渡速度
    //经纬度,作为地图中心点
    long: "",
    lat: "",
  },
//获取地图标点数据
  getInfo(){
    $api.换自己接口({
    }).then((res) => {
      if(res.data.code == 1){
        let data = res.data.data
        this.setData({
          markers:data, //获取地图标点数据(这玩意儿数据格式有要求,提前跟后端说,省的处理数据了,跟后端关系不好的当我没说,格式看下边图片)
          //获取第一个显示的经纬度,作为地图中心点
          long: data[0].longitude,
          lat: data[0].latitude,
        })
      }else{
        wx.showToast({
          title: res.data.msg,
          icon: 'none',
          duration: 2000
        })
      }
    })
  },
// swiper切换 地图中心点跟着切换至对应的标点上
  swiperChange(e) {
    let index = e.detail.current
    let long = this.data.markers[index].longitude
    let lat = this.data.markers[index].latitude
    const mapContext = wx.createMapContext('myMap');
    mapContext.moveToLocation({
      latitude: Number(lat),
      longitude: Number(long)
    });
  },
//获取swiper数据
  getList(){
    $api.换自己接口({
    }).then((res) => {
      if(res.data.code == 1){
        let data = res.data.data
        this.setData({
          swiperList:data
        })
      }else{
        wx.showToast({
          title: res.data.msg,
          icon: 'none',
          duration: 2000
        })
      }
    })
  },

maker地图标点数据要求,有必填项即可,需要更多看官网 

map | 微信开放文档 往下扒拉扒拉就是