Foreword: The company wants to embed the map of Hainan Province in the vue2 project, mark some address information on the map, and display different colors for counties and districts in the province. The requirement is not difficult.
Official website: https://lbs.amap.com/api/jsapi-v2/guide/abc/load
uses the js loader in Amap
Install via npm:
npm i @amap/amap-jsapi-loader --save
1. Create a new MapContainer.vue file in the project and use it as a map component.
2. Just introduce it in the component, create a div and set the style.
3. Prepare the key and security key, because they will be needed after the upgrade.
// 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>
This picture is the counties and districts in a province. The blocks are divided into colors. The official website example address: https://lbs.amap.com/demo/jsapi-v2/example/district/district-pro.
This picture is the dot mark of the official website. I just changed the color and size
Remove the default logo and copyright in the lower left corner of Amap:
找到你的index.html文件，添加样式，其他地方修改不管用
.amap-logo{
display: none !important;
}
.amap-copyright {
opacity:0 !important;
}
I only want to display one province, and the surrounding areas are not displayed. Cover it with color. This is also added under the initialization. This inside points to the problem, and a is defined outside.
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);
})