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

效果:

首先--创建地图

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

相关推荐
@PHARAOH16 小时前
WHAT - uni-app 条件编译技术
小程序·uni-app·条件编译
hunzi_118 小时前
选择网上购物系统要看几方面?
java·微信小程序·小程序·uni-app·php
芭拉拉小魔仙21 小时前
Uniapp Vue3 小程序接入实时音视频TUICallKit遇到的问题
小程序·uni-app·实时音视频
2305_7978820921 小时前
AI识图小程序的功能框架设计
人工智能·微信小程序·小程序
暮雨哀尘1 天前
微信小程序开发:开发实践
开发语言·算法·微信小程序·小程序·notepad++·性能·技术选型
幽络源小助理1 天前
微信小程序实验室管理SSM系统设计与实现
微信小程序·小程序
zoahxmy09292 天前
微信小程序 request 流式数据处理
微信小程序
人人题2 天前
汽车加气站操作工考试答题模板
笔记·职场和发展·微信小程序·汽车·创业创新·学习方法·业界资讯
曲江涛2 天前
微信小程序 webview 定位 并返回
微信小程序·小程序
weixin_440470502 天前
部署Dify接入微信验证反代根目录创建一个文件通过微信小程序验证
微信小程序·腾讯云