思路:多个页面都需要调用地图,将地图封装成一个组件进行复用,发现调用时只有第一次渲染成功了。
解决:相同 id 的地图渲染只能有一次,如果多个复用地图的页面不需要同时渲染,使用 v-if 来控制;需要同时渲染的情况下,只能使用不同的容器渲染地图,js部分共用
<div id="container"></div>
mapData.map = new AMap.Map("container", {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 11, //初始化地图层级
viewMode: "3D",
city: "杭州",
center: [120.21, 30.25],
features: ["bg", "road", "building", "point"], // point
});