uni-app mapContext.addMarkers不生效

uni-app mapContext.addMarkers不生效

开发环境 版本号 项目创建方式
Windows Windows 10 家庭中文版 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.3.13

手机系统：Android

手机系统版本号：Android 8.0

手机厂商：小米

手机机型：MIX2

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```html
<template>
<view>
<map id="map1" ref="map1" class="map" v-if="isShowMap" :latitude="latitude" :longitude="longitude" :scale="scale"
[@controltap](/user/controltap)="controltap" :show-location="true"></map>
<button [@click](/user/click)="addMarkers">updateMarker</button>
</view>
</template>    

<script>
export default {
data() {
return {
isShowMap: true,
latitude: 23.099994,
longitude: 113.324520,
scale: 7,
controls: [{
id: 1,
position: {
left: 15,
top: 15
},
iconPath: `../../static/images/map/dlsj-icon.png`,
clickable: true
}]
}
},
onReady() {
this.mapContext = uni.createMapContext('map1', this);
this.mapContext.initMarkerCluster({
enableDefaultStyle: false,
zoomOnClick: true,
gridSize: 60,
complete(res) {
console.log('initMarkerCluster', res)
}
});
this.mapContext.on("markerClusterCreate", (e) => {
console.log("markerClusterCreate", e);  
});
},
methods: {
addMarkers() {
const marker = [{
id: 1,
iconPath: `../../static/images/map/dlsj-icon.png`,
latitude: 23.099994,
longitude: 113.324520,
width: 50,
height: 50,
joinCluster: true, // 指定了该参数才会参与聚合
label: {
width: 50,
height: 30,
borderWidth: 1,
borderRadius: 10,
bgColor: '#ffffff'
}
}];
this.mapContext.addMarkers({
markers: marker,
clear: false,
complete(res) {
console.log('addMarkers', res)
}
})
},
}
}
</script>    

.map {
width: 750rpx;
height: 400px;
}

操作步骤：

点击updateMarker执行mapContext.addMarkers

预期结果：

可以正常执行mapContext.addMarkers

实际结果：

点击updateMarker执行mapContext.addMarkers不生效

bug描述：

mapContext.addMarkers不生效


更多关于uni-app mapContext.addMarkers不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复
<template> <view> <map id="map1" ref="map1" class="map" v-if="isShowMap" :latitude="latitude" :longitude="longitude" :scale="scale" @controltap="controltap" :show-location="true"></map> <button @click="addMarkers">updateMarker</button> </view> </template> <script> export default { data() { return { isShowMap: true, latitude: 23.099994, longitude: 113.324520, scale: 7, controls: [{ id: 1, position: { left: 15, top: 15 }, iconPath: `../../static/images/map/dlsj-icon.png`, clickable: true }] } }, onReady() { this.mapContext = uni.createMapContext('map1', this); this.mapContext.initMarkerCluster({ enableDefaultStyle: false, zoomOnClick: true, gridSize: 60, complete(res) { console.log('initMarkerCluster', res) } }); this.mapContext.on("markerClusterCreate", (e) => { console.log("markerClusterCreate", e); }); }, methods: { addMarkers() { const marker = [{ id: 1, iconPath: `../../static/images/map/dlsj-icon.png`, latitude: 23.099994, longitude: 113.324520, width: 50, height: 50, joinCluster: true, // 指定了该参数才会参与聚合 label: { width: 50, height: 30, borderWidth: 1, borderRadius: 10, bgColor: '#ffffff' } }]; this.mapContext.addMarkers({ markers: marker, clear: false, complete(res) { console.log('addMarkers', res) } }) }, } } </script> <style> .map { width: 750rpx; height: 400px; } </style>

更多关于uni-app mapContext.addMarkers不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


App-nvue 3.1.0+，微信小程序支持，详见文档说明

在 uni-app 中使用 mapContext.addMarkers 时，如果发现不生效，可能是由于以下原因之一。你可以根据这些可能的原因进行排查和修复：

1. mapContext 未正确获取

确保你已经通过 uni.createMapContext 正确获取了 mapContext，并且 mapId 与地图组件的 id 一致。

const mapContext = uni.createMapContext('myMap'); // 'myMap' 是地图组件的 id

2. markers 数据格式不正确

addMarkers 方法需要传入一个 markers 数组，数组中的每个对象必须符合 marker 的格式要求。请检查 markers 的字段是否正确。

const markers = [
  {
    id: 1,
    latitude: 39.90469, // 纬度
    longitude: 116.40717, // 经度
    title: '北京',
    iconPath: '/static/marker.png', // 图标路径
    width: 30,
    height: 30,
    callout: {
      content: '北京市',
      color: '#ffffff',
      bgColor: '#007AFF',
      padding: 10,
      borderRadius: 4,
      display: 'ALWAYS'
    }
  }
];

mapContext.addMarkers({
  markers: markers,
  clear: false // 是否先清空地图上的标记
});

3. 地图组件未渲染完成

如果在地图组件还未渲染完成时调用 addMarkers，可能会导致方法不生效。可以尝试在 onReady 事件中调用 addMarkers。

<map id="myMap" style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" @ready="onMapReady"></map>

methods: {
  onMapReady() {
    const mapContext = uni.createMapContext('myMap');
    const markers = [
      {
        id: 1,
        latitude: 39.90469,
        longitude: 116.40717,
        title: '北京',
        iconPath: '/static/marker.png'
      }
    ];
    mapContext.addMarkers({
      markers: markers,
      clear: false
    });
  }
}

4. 地图组件的 latitude 和 longitude 未设置

确保地图组件的 latitude 和 longitude 属性已正确设置，否则地图可能无法正确显示标记。

<map id="myMap" style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude"></map>

data() {
  return {
    latitude: 39.90469,
    longitude: 116.40717
  };
}

5. 平台兼容性问题

addMarkers 方法在不同平台（如微信小程序、H5、App）上的支持情况可能不同。请确保你使用的平台支持该方法。

  • 微信小程序：支持。
  • H5：部分功能可能不支持。
  • App：支持，但需要注意平台差异。

6. 地图组件版本问题

某些情况下，地图组件的版本可能影响 addMarkers 的生效。可以尝试更新 uni-app 版本或相关依赖。

7. 调试工具问题

如果你在开发工具中测试时发现不生效，可以尝试在真机上运行，因为开发工具可能存在模拟器兼容性问题。

示例代码

以下是一个完整的示例代码，供参考：

<template>
  <view>
    <map id="myMap" style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" @ready="onMapReady"></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.90469,
      longitude: 116.40717
    };
  },
  methods: {
    onMapReady() {
      const mapContext = uni.createMapContext('myMap');
      const markers = [
        {
          id: 1,
          latitude: 39.90469,
          longitude: 116.40717,
          title: '北京',
          iconPath: '/static/marker.png',
          width: 30,
          height: 30,
          callout: {
            content: '北京市',
            color: '#ffffff',
            bgColor: '#007AFF',
            padding: 10,
            borderRadius: 4,
            display: 'ALWAYS'
          }
        }
      ];
      mapContext.addMarkers({
        markers: markers,
        clear: false
      });
    }
  }
};
</script>
回到顶部