vue2项目使用高德api内嵌地图，点标记+行政区分颜色

前言：公司想在vue2项目中嵌入海南省的地图，在地图上标记出一些地址信息，省内的县区等各个区块展示不同的颜色，需求不是很难。
官网：https://lbs.amap.com/api/jsapi-v2/guide/abc/load
使用的是高德里面的js loader

通过npm安装：

npm i @amap/amap-jsapi-loader --save

1.在项目中新建 MapContainer.vue 文件，用作地图组件
2.在组件中引入即可，创建一个div，设置样式
3.准备好key和安全密钥，因为升级之后就需要

// MapContainer.vue

<template>
     <div id="container"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
  securityJsCode: '你的安全密钥'
}
export default {
	name: 'MapContainer',
	data(){
		return {
			map: null,
			polygon: [] // 这个就是只展示一个省，需要的数组
		}
	},
	mounted(){
		this.initAMap()
	},
	methods: {
		initAMap(){
			AMapLoader.loader({
				key:'',  //设置您的key
				version:"2.0",
				plugins:[], //用到的插件都放在这里面
				Loca:{
		          version:"2.0"
		        }
			}).then((AMap) => {
				// 初始化
				this.map = new AMap.Map("container",{
		          resizeEnable: true,
		          viewMode:"3D",
		          zoom: 8, // 初始放大级别
		          center: [105.602725,37.076636], // 地图展示的中心位置
		          scrollWheel: false, // 禁止拖拽
		          doubleClickZoom: false, // 禁止双击放大
		          dragEnable: false, // 禁止鼠标拖拽平移
		        });
		        // 后续添加的各种功能都是在这里面的
		        // 行政区颜色区分
				var disProvince = new AMap.DistrictLayer.Province({
			          zIndex:12,
			          adcode:['460000'], // 这个code就是海南省的code
			          depth:2,
			          styles:{
			              'fill':function(properties){
			                  var adcode = properties.adcode;
			                  return _this.getColorByAdcode(adcode);
			              },
			              'province-stroke':'cornflowerblue',
			              'city-stroke': 'white',//中国地级市边界
			              'county-stroke': 'rgba(255,255,255,0.5)'//中国区县边界  
			          }
		        })
			    disProvince.setMap(this.map);
				// 圆点标记，因为是好多的地方需要标记，我就用了个for循环
				for(let i = 0; i < this.capitals.length; i++) {
				  // 这个坐标好像只能是数字，但是我后端返回的是字符串又不在一块，所以我拼接一下
		          let center = [Number(this.capitals[i].gJd), Number(this.capitals[i].gWd)];
		          let circleMarker = new AMap.CircleMarker({
		            center:center,
		            radius:5, // 圆点半径
		            strokeColor:'white',
		            strokeWeight:2,
		            strokeOpacity:0.5,
		            fillColor:'red', // 颜色
		            fillOpacity: 1,
		            zIndex: 99, // 层级
		            bubble:true,
		            cursor:'pointer',
		            clickable: true
		          })
		          circleMarker.setMap(this.map)
		        }
			})
		}，
		// 上面区块区分颜色的函数
		getColorByAdcode (adcode) {
	        if (!colors[adcode]) {
	            var gb = Math.random() * 155 + 50;
	            colors[adcode] = 'rgb(' + gb + ',' + gb + ',255)';
	        }
	
	        return colors[adcode];
	    };
	}，
	
}
</script>
<style  scoped>
  #container{
    padding:0px;
    margin: 0px;
    width: 100%;
    height: 680px;
  }
</style>

这个图就是一个省里面的县区，区块分颜色，官网示例地址：https://lbs.amap.com/demo/jsapi-v2/example/district/district-pro

这个图是官网的点标记，我就是修改了一下颜色大小

去掉高德左下角默认的logo和版权：

找到你的index.html文件，添加样式，其他地方修改不管用
.amap-logo{
	display: none !important;
}
.amap-copyright {
	opacity:0 !important;
}

只想展示一个省，周边都不显示，用颜色覆盖，这个也是添加在初始化下面的，里面this指向问题，就在外面定义了一个

var dis = new AMap.DistrictSearch({
	extensions: 'country',
	subdistrict: 1
}).search('海南省', function(status, result) {
	let outer = [
      new AMap.LngLat(-360, 90, true),
      new AMap.LngLat(-360, -90, true),
      new AMap.LngLat(360, -90, true),
      new AMap.LngLat(360, 90, true),
    ]
    let holes = result.districtList[0].boundaries
    let pathArray = [
      outer
    ];
    pathArray.push.apply(pathArray, holes)
    _this.polygon = new AMap.Polygon({
      pathL: pathArray,
      strokeColor: '#f5f5f5',//城市边界颜色
      strokeWeight: 1,
      fillColor: 'red', // 遮罩背景色黑色
      fillOpacity: 1
    })
    _this.polygon.setPath(pathArray);
    _this.map.add(_this.polygon);
})