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

效果:

首先--创建地图

使用官方文档中的地图组件 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

相关推荐
yuanmenglxb200440 分钟前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
编程毕设2 小时前
【含文档+PPT+源码】基于微信小程序连锁药店商城
微信小程序·小程序
幽络源小助理2 小时前
微信小程序鲜花销售系统设计与实现
微信小程序·小程序
换日线°4 小时前
CSS简单实用的加载动画、骨架屏有效果图
css·微信小程序
10年前端老司机4 小时前
微信小程序wxs
前端·javascript·微信小程序
halo14165 小时前
uni-app 小程序中的定位问题 以及 页面安全距离
小程序·uni-app
努力成为包租婆15 小时前
微信小程序 van-dropdown-menu
微信·微信小程序·小程序
thinkQuadratic16 小时前
微信小程序动态设置高度,添加动画等常用操作
微信小程序·小程序
中科三方17 小时前
APP和小程序需要注册域名吗?(国科云)
小程序·apache
幽络源小助理19 小时前
微信小程序文章管理系统开发实现
java·微信小程序·springboot