小程序地图多点标记 marker

最新推荐文章于 2025-04-07 20:17:43 发布

曾曾曾同学

最新推荐文章于 2025-04-07 20:17:43 发布

阅读量2.6k

点赞数 2

分类专栏：小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/qq_23943923/article/details/109819998

版权

记录如何设置小程序多点标记，从标记点跳转到详情页面，以及中途遇到的问题；
标点数据从后台获取，先上完整的代码；
xml:

<map 
      id="myMap" 
      markers="{
  {markers}}" 
      show-location 
      include-points="{
  {markers}}" 
      bindmarkertap="toaddress"
      bindcallouttap="toaddress"
      wx:if="{
  {hasMarkers}}"
  >
</map>

js:

//index.js
//获取应用实例
const app = getApp()
const util=require("../../utils/util.js")
Page({
  /**
   * 页面的初始数据
   */
  data: {
    token:"",   
    points:[],
    mapCtx:"",
    markers: [],
    hasMarkers:false,//判断数据是否请求，标点数据请求成功后，将该参数设置为true;
    mapWidth: '',
    mapHeight: ''
  },
  onReady: function () {
    
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onShow:function(){   
    this.getMap();    
    var sy = wx.getSystemInfoSync(),
    mapWidt