一、引入高德JSAPI
//在项目根目录下的模板index.html中引入下面2个JSAPI
<head>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key&plugin=AMap.DistrictSearch,AMap.Scale,AMap.MarkerClusterer"></script>
<script type="text/javascript" src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<style>
/*隐藏地图loge*/
* {
touch-action: pan-y;
}
.amap-logo {
opacity: 0;
}
.amap-copyright {
opacity: 0;
}
.amap-marker-label {
border: 0;
background-color: transparent;
color: #9CA09D;
font-size: large;
}
.info {
position: relative;
top: 0;
right: 0;
min- 0;
font-size: 16px;
transform: scale(1);
}
.info-top > img {
position: absolute;
right: 0px;
top: 0px;
1.2rem;
height: 1.2rem;
}
</style>
</head>
二、声明externals
//因为是通过script标签引入的，所以要在webpack中将引入的库声明为外部扩展，否则在模块中导入时找不到。如果是vue-cli2的话，直接到build文件夹下的webpack配置文件中添加就行；如果是vue-cli3的话，自己在项目根目录下建一个vue.config.js文件，添加下面的externals配置，然后重启项目，刷新界面。
configureWebpack: config => {
config.externals = {
AMap: "window.CityGis",
"GDAMap": "AMap",
};
},
三、初始化地图
<template>
<div class="map-container">
<van-search
v-model="value"
show-action
label="上海市"
placeholder="请输入关键词"
@search="onSearch"
>
<template #action>
<div @click="onSearch">搜索</div>
</template>
</van-search>
<div class="map">
<div id="container" style=" 100% ;height: 100%">
</div>
</div>
</div>
</template>
<script>
export default {
name:"",
components: {},
props: {},
data() {
return {
value: '',
};
},
computed: {},
watch: {},
created() {
},
mounted() {
this.$nextTick(()=>{
this.initMap();
this.init1("上海市");
});
},
methods: {
onSearch() {
console.log('搜索',this.value);
},
// 地图的初始化
initMap(){
window.map = new window.AMap.Map("container", {
zoom: 13,
rotateEnable: true,
pitchEnable: true,
pitch: 0,
defaultCursor: "Pointer",
showBuildingBlock: false,
buildingAnimation: true,
expandZoomRange: true,
zooms: [0, 20],
resizeEnable: true,//是否监控地图容器尺寸变化
features: ['point', 'road', 'bg'],//隐藏默认楼块
viewMode: "3D",
});
window.map.setFitView();
window.map.on('zoomchange', this.getZoom);
this.setMapStyle('f1a19ef420e096588eff80f7b7be9dc6')
this.setZoomCentrer(11, [121.238825, 31.353284])
this.setAreaOilygon()//街镇区域
},
setMapStyle(value) {
const myStyle = 'amap://styles/' + value
window.map.setMapStyle(myStyle)
},
setZoomCentrer(num, lnglat) {
window.map.setZoomAndCenter(num, lnglat)
},
setAreaOilygon(newkey = ['jiadingzhen']) {
let area = require('@/utils/area.json')
let areaList = []
for (const key of Object.keys(area)) {
areaList.push(key)
}
for (const key of Object.keys(area)) {
if (key && areaList.some(item => item == key)) {
const points = []
for (const item of area[key]) {
points.push([item.lng, item.lat])
}
let polygon = new window.AMap.Polygon({
path: points,
strokeWeight: 4,
strokeColor: '#01ffff',
fillOpacity: 0.7,
name: 11,
fillColor: '#02a8f5',
})
polygon.on('click', this.getAreaOilygon)
window.map.add(polygon)
}
}
},
getAreaOilygon(e) {
console.log(e);
},
//区域遮盖(只显示部分地区遮罩其他地区)
init1 (city) {
var that =this
if( that.polygon ) {
window.map.remove(that.polygon)
}
AMap.plugin('AMap.DistrictSearch', function () {
new AMap.DistrictSearch({
extensions: 'all',
subdistrict: 0
}).search(city, function(status, result) {// 外多边形坐标数组和内多边形坐标数组
var 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)
]
var holes = result.districtList[0].boundaries
var pathArray = [outer]
pathArray.push.apply(pathArray, holes)
that.polygon = new AMap.Polygon({
pathL: pathArray,
strokeColor: '#ddd',//城市边界颜色
strokeWeight: 3,
fillColor: '#fff', // 遮罩背景色黑色
fillOpacity: 1
})
that.polygon.setPath(pathArray)
window.map.add(that.polygon)
})
})
},
}
};
</script>
<style scoped lang="scss">
.map {
100%;
height: 500px;
}
</style>