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

效果:

首先--创建地图

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

相关推荐
小小王app小程序开发1 小时前
任务悬赏小程序深度细分分析:非技术视角下的运营逻辑拆解
大数据·小程序
2501_915918412 小时前
iOS 26 App 性能测试|性能评测|iOS 26 性能对比:实战策略
android·macos·ios·小程序·uni-app·cocoa·iphone
腾马科技8 小时前
新版saas餐饮外卖小程序源码/微信/支付宝/抖音/扫码点餐/DIY装修/美团代付/全开源
微信小程序·小程序·点餐小程序
郑叔敲代码13 小时前
帝国cms 微信小程序的登录逻辑
微信小程序·小程序·notepad++
棋子一名16 小时前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
无衣 秦风17 小时前
vue3+hubuilderX开发微信小程序使用elliptic生成ECDH密钥对遇到的问题
微信小程序·小程序
游戏开发爱好者817 小时前
BShare HTTPS 集成与排查实战,从 SDK 接入到 iOS 真机调试(bshare https、签名、回调、抓包)
android·ios·小程序·https·uni-app·iphone·webview
2501_9160088918 小时前
iOS 26 系统流畅度实战指南|流畅体验检测|滑动顺畅对比
android·macos·ios·小程序·uni-app·cocoa·iphone
流***陌19 小时前
陪诊就医小程序中健康档案的精细化管理设计方案
小程序
明天你好26719 小时前
如何做一个花店小程序,搭建一个小程序多少钱
微信小程序·小程序·模拟退火算法