微信小程序--怎样在小程序中创建地图并渲染数据中的点标记

效果:

首先--创建地图

使用官方文档中的地图组件 map

javascript 复制代码
<map id="mapId" class="map" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}"></map>

其中的属性值:

longitude 经度

latitude 纬度

markers 点标记

wxml部分:

javascript 复制代码
<view>
  <view class="top">
    <view class="topLeft">
      <van-tabs bind:click="onClick">
        <van-tab wx:for="{{addressData}}" wx:key="id" name="{{item.id}}" title="{{item.name}}">
        </van-tab>
      </van-tabs>
    </view>
    <view class="topRight">
      <image src="img/mapbtn.png" mode="" />
    </view>
  </view>
  <map id="mapId" class="map" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}"></map>
</view>

js部分:

javascript 复制代码
/**
   * 页面的初始数据
   */
  data: {
    addressData: [],
    addressId: '',
    sencinData: [],
    longitude: '116.397963',
    latitude: '39.915119',
    markers: []
  },
// 点击事件
  onClick(event) {
    console.log(event);
    this.addressId = event.detail.name
    wx.showToast({
      title: `点击标签 ${event.detail.title}`,
      icon: 'none',
    });
    let that = this
    wx.request({
      url: 'https://xxxxxx.xxx', //接口请求
      method: 'POST',
      data: {
        xxx: event.detail.name
      },
      success: (res) => {
        console.log(res);
        that.setData({
          sencinData: res.data.data
        })
        console.log(that.data.sencinData);
        this.loadMarkers(); //点标记渲染
      }
    })
  },
//渲染事件
  loadMarkers: function () {
    let markers = this.data.sencinData
    //生成 markers 列表,用于在地图上展示
    let markersData = markers.map(marker => {
      return {
        id: marker.id,
        longitude: marker.lng, //经度
        latitude: marker.lat, //纬度
        title: marker.name, //名称
        county: marker.address, 
        iconPath: 'https://xxxxxx' + marker.imgs, //标点图片,接口数据如果没有可以用本地路径
        width: 40,
        height: 40,
      };
    });
    console.log('---------------------------');
    console.log(markersData);
    console.log('---------------------------');
    this.setData({
      markers: markersData
    });
  },

生命周期函数--监听页面初次渲染完成:

javascript 复制代码
/**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

    wx.setNavigationBarTitle({
      title: '景区地图',
    })
    // 初始渲染
    let that = this
    wx.request({
      url: 'https://xxxxxx.xxx',
      method: 'POST',
      data: {
        xxx: xxx
      },
      success: (res) => {
        console.log(res);
        that.setData({
          addressData: res.data.data
        })
        console.log(that.data.addressData);
        wx.request({
          url: 'https://xxxxxx.xxx',
          method: 'POST',
          data: {
            xxx: that.data.xxx[0].id
          },
          success: (res) => {
            console.log(res);
            that.setData({
              sencinData: res.data.data
            })
            console.log(that.data.sencinData);
            //加载点位数据
            this.loadMarkers();
          }
        })
      }
    })

  },

最终效果:

我这里的数据经纬度都是一样的(因为是练习的demo),所以呈现了上述效果

/ヾ(≧▽≦*)o

相关推荐
racerun6 小时前
小程序导航设置更多内容的实现方法
小程序
说私域6 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6686 小时前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳7 小时前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui
Jyywww12110 小时前
微信小程序学习笔记
笔记·学习·微信小程序
The_era_achievs_hero11 小时前
微信小程序41~50
微信小程序·小程序
走,带你去玩19 小时前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
是一碗螺丝粉19 小时前
🔥 微信H5视频自动播放终极秘籍:WeixinJSBridge竟是官方“通行证”?
微信小程序
一笑code20 小时前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react