1.<div id="mapChart" :style="{ width: '70vh', height: '70vh' }"></div>
// 地图配置项
initmapFn() {
var _this = this;
// 创建地图,同时给地图设置中心点、级别、显示模式、自定义样式等属性
_this.map1 = new AMap.Map("mapChart", {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 3, // 缩放级别
center: [113.3245904, 23.1066805], //中心点坐标
});
//插件依旧写在回调函数内,通过AMap.plugin方法按需引入插件,第一个参数是插件名,第二个是在plugin回调之后使用插件功能。
AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.OverView"], function () {
_this.map1.addControl(new AMap.ToolBar());
_this.map1.addControl(new AMap.Scale());
_this.map1.addControl(new AMap.OverView({ isOpen: true }));
});
_this.map1.clearMap();// 清除所有的覆盖物信息
// 创建 infoWindow 实例
// _this.map1.setFitView();
},
// 地图标注
onMarkerMap(data) {
if (data[0]) {
data.forEach((element, index) => {
if (element.lng) {
let marker = new AMap.Marker({
//在回调函数里面创建Marker实例,添加经纬度和标题
position: new AMap.LngLat(element.lng, element.lat), //添加经纬度
offset: new AMap.Pixel(-13, -30), // 偏移量
// title: "广州塔", // 鼠标移上去时显示的内容
// 可以自定义标记点显示的内容,允许插入html字符串
// content: "<h1>广州塔Content</h1>",
});
this.map1.add(marker); // 将创建的点标记添加到已有的地图实例:
//marker.setMap(this.map1);
//名称
marker.setLabel({// 设置label标签
offset: new AMap.Pixel(-50, -30), //设置文本标注偏移量
content: `<div class="info">${element.enterpriseName}</div>`, //设置文本标注内容
direction: "right", //设置文本标注方位
});
}
});
}
}