微信小程序地图

效果展示

通过点击标签切换到相应的景点地区

html部分

<!--pages/map/map.wxml-->
<!-- <text>地图页面</text> -->
<view class="geographical_map">
<!-- 标记点预留处 -->
<view class="map_label" >
<view  wx:for="{{biao_shi}}" bindtap="map_ditu" data-id="{{item.id}}">{{item.name}}</view>
</view>
<!-- 地图 -->
<view class="map">
<map    
  id="map" 
  style="width: 100%;height: 100%;"
  longitude="{{longitude}}"
  latitude="{{latitude}}"
  markers="{{markers}}"
  scale="{{scale}}"
  show-location
></map>
</view>
</view>

css部分

/* pages/map/map.wxss */
/* 给地图一个宽高 */
.geographical_map map{
  width: 100%;
  height: 100vh;
}
.map_label{
  justify-content: space-around;
  display: flex;
  width: 100%;
  height: 60px;
  background-color: #ffffff;
  font-size: 20px;
  line-height: 100rpx;
}
page{
  height: 100%;
}
.map_diaply{
  width: 70%;
  display: flex;
  font-size: 40rpx;
}
.map_diaply view{
  margin: 0 10px 0 10px;
}
.map_image image{
  width:50rpx ;
  height: 50rpx;
}
/* ditu */
.map{
  width: 100vw;
  height: 100vh;
}page{
  background-color: #8a8a8a;
}

json部分

{
  "usingComponents": { "van-tab": "@vant/weapp/tab/index",
    "van-tabs": "@vant/weapp/tabs/index"}
}

js部分

// pages/map/map.js
Page({
  // 地图控件
 
  /**
   * 页面的初始数据
   */
  data: {
// 标识
biao_shi:'',
// 地图其他数据
qi_ta:'',
// ditu
longitude:"",   // 中心经度
latitude:"",    // 中心纬度
markers:[],     // 标记点
scale:10        // 缩放级别，取值范围为3-20

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let str = wx.getStorageSync('shezhi')
    var that = this;
    wx.request({
      url: '通过这个接口获取标记点',
      data: {
        //需要的参数
      },
      header: {
        'content-type': 'application/json'
      },
      success (res) {
        console.log(res);
        console.log(res.data.data);
        that.setData({
          biao_shi:res.data.data
        })
        // console.log(biao_shi);
      }
    }),
      // 获取当前地理位置
      wx.getLocation({
        success:(res)=>{
            let {latitude,longitude} = res;
            this.setData({
                latitude,
                longitude,
            })
        }
    })


  },
  // 地图标识点击事件
  map_ditu:function (e) {
    let {id} = e.target.dataset;
    console.log(e.currentTarget.dataset.id);
    let str = wx.getStorageSync('shezhi')
    var that = this;
    wx.request({
      url: '地图地点接口',
      data: {
        //参数
      },
      header: {
        'content-type': 'application/json'
      },
      success (res) {
        console.log(res);
        console.log(res.data.tab);
        console.log(res.data)
        let ar=[]
        // 标记点
        for (let i = 0; i < res.data.tab.length; i++) {
            let obj={
                name:res.data.tab[i].name,
                joinCluster:true,   // 是否点聚合
                iconPath:"/image/bar.jpg",  // 项目目录下的图片路径
                longitude:res.data.tab[i].lng, // 经度
                latitude:res.data.tab[i].lat,  // 纬度
                width:30,  // 标注图标宽度
                height:30, // 标注图标高度
                label:{
                    content:`${res.data.tab[i].name}`,  //文本
                    color: '#000000',  //文本颜色
                    borderRadius: 3,  //边框圆角
                    // borderWidth: 1,  //边框宽度
                    borderColor: '#409eff',  //边框颜色
                    bgColor: '#ffffff',  //背景色
                    padding: 5,  //文本边缘留白
                    textAlign: 'center'  //文本对齐方式。有效值: left, right, center
                  },
            }
            ar.push(obj)
        }
        console.log(ar);
        that.setData({
            longitude:res.data.tab[0].lng,   // 中心经度
            latitude:res.data.tab[0].lat,    // 中心纬度
            markers:ar
        })

      }
    })
  }, // 自定义markers

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})