- 将高德地图的css放在index
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />- 引入高德地图，也是在index.html中添加，key需要在高德地图官网中申请
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的key值"></script>- 在template中
-
<template>
<div class="hello">
<div id="container" :style="height"></div>
</div>
</template>
- 在script中的mounted()生命周期函数中设置地图，设置自定义的遮盖物，还有设置放大缩小后的事件
//初始化创建地图
this.map = new AMap.Map("container", {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 18, //初始化地图层级
center: [x, y], //初始化地图中心点
});
//设置自定义点的模块
var content = `<div id="content" style=" background: #ffff;width: 148px;height: 161px;"></div>`;
//添加标记点
this.marker = new AMap.Marker({
content: content, // 自定义点标记覆盖物内容
position: [x, y], // 基点位置
offset: new AMap.Pixel(x, y), // 相对于基点的偏移位置
});
//给遮盖物添加事件
this.marker.on('click','对应的事件名称')
this.map.add(this.marker);//添加标记遮盖物
//绑定缩放的事件，判断地图是否最大，是否显示mark
this.map.on('zoomstart','对应的事件名称');//开始缩放
this.map.on('zoomchange', '对应的事件名称');//缩放变化
this.map.on('zoomend', '对应的事件名称');//缩放结束
