项目中使用地图的场景比较多,将常用的功能整理一下,方便后期使用。
目录
1.地图的引入
高德地图需要我们在项目最外层引入,也就是在public/index.html中直接引入。代码如下
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=yourkey"></script>
其中将key的内容替换为高德的开发者key(高德地图开发者key申请),注册一个即可。
2.地图在页面显示
想要地图在页面上显示出来,需要一个承载地图的容器--div,代码如下
<div class="map" id="i-map" ref="map"></div>
初始化地图组件
mounted() {
this.map = new AMap.Map('i-map')
},
一定要用id来注册地图组件,注册成功后,就可以使用this.map来操作的图了。通过上述操作,地图并未在页面展示,因为我们只声明了一个div并未给它高度,需要定义地图的高度,宽度自适应即可。下面是CSS代码
.map
width 100%
height 500px
这样,地图就出来了。
3.点标记
3.1快速点标记
常用的场景就是显示某一坐标的位置。
markerPoint(iconUrl, lnglat) {
let marker = new AMap.Marker({
icon: iconUrl,
position: lnglat
});
marker.setMap(this.map);
},
iconUrl:需要展示的图标路径
lnglat:坐标的位置。//[x,y]
3.2点标记详细配置
markerPoint(iconUrl, lnglat) {
let marker = new AMap.Marker({
icon: new AMap.Icon({
size: new AMap.Size(14, 34),//图标大小
image: iconUrl,
imageSize: new AMap.Size(14, 34)//图片大小
}),
angle: 80,//角度
offset: new AMap.Pixel(-7, -17),//图标偏移
position: lnglat
});
marker.setMap(this.map);
},
通过上述代码,可以对图像进行相应的移动,使图像在目标点的合适位置展示。
4.圆形、方形、多边形标记
针对上述功能,本地对高德的接口稍作封装。
//创建圆形对象
//center: