最近公司需要做一个全屏可视化的项目，里面需要用到地图引用等功能,把地图引用过程中遇到的问题统计了一下。大概如下
地图的选择，高德地图
首先，要确定使用哪一种地图，毕竟市场上的地图那么多，各有各的优点和缺点,通过比较选择了高德地图，那如何使用呢？
前期准备，高德地图的引用方式及key的获取
引入方式有两种，
- 第一种为vue-amap的引入，请参考官网https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install
- 第二种为sdk引入方式，通过script 引入http://webapi.amap.com/maps?v=1.3&key='您申请的key值'，目前我们采用第二种。
那么如何申请key值呢？
- 这需要你到高德地图官网去申请一个帐号，在个人帐户应用管理里面申请key值，把key值复制到script的src中，再把script放入到vue项目中的index.html中
初始化地图 前期工作准备完毕，那我们开始应用地图功能了，首先，我们要先初始化一下地图api
let map = new AMap.Map('amap',{
mapStyle: 'amap://styles/7f9ac66640b86c170ccb25015a3300e7', //此处为自定义地图的样式
center: [120.907788,31.380265], //坐标中心点
zoom: 14, //缩放级别
pitch: 45, // 地图俯仰角度，有效范围 0 度- 83 度
viewMode:'3D' // 启用3d地图模式
})
//初始化之后的地图显示的只是地图的一些基本功能，但是如果我们想显示多个点怎么办，每个点显示的图标不一样怎么，我们想加点击事件怎么办？不说废话，直接上代码
var markers = []
for (var i = 0; i < this.hotInfo.length; i += 1) {
var marker;
var icon;
if (this.hotInfo[i].type === 1) { //通过type可以判断显示不同的图标
icon = new AMap.Icon({
image: require('../../../assets/images/jjmap/circle1.png'), //引入自定义的图标
size: new AMap.Size(24, 24) //设置自定义图标的大小
});
}
if (this.hotInfo[i].type === 2) {
icon = new AMap.Icon({
image: require('../../../assets/images/jjmap/circle2.png'),
size: new AMap.Size(24, 24)
});
}
marker = new AMap.Marker({ //创建marker实例
icon: icon,
position: this.hotInfo[i].center.split(','), //此处必须为经纬度数组
offset: new AMap.Pixel(-12,-12),
zIndex: 101,
title: this.hotInfo[i].name,
map: map
});
markers.push(marker)
marker.on('click', function(e) { //为每个marker加点击事件，
that.isShow = true //此处判断自定义弹窗是否显示
map.setZoomAndCenter(14, [e.lnglat.lng, e.lnglat.lat]); //如果你想点击之后的地址自动居中，可以设置
})
}
map.setFitView() // 适应窗口
