vue中使用高德地图隐藏不需要的板块
效果图:
直接在全局index中引入:
在更新版本后密钥和key都必须输入,不然会出现没有数据的情况
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: '密钥值', //密钥
}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=key值&plugin=AMap.DistrictSearch"></script>
<template>
<div
id="container"
style="position: relative; width: 100%; height: 500px"
></div>
</template>
<script>
export default {
name: "Amap",
data() {
return {
map: "",
};
},
mounted() {
this.initAMap();
},
methods: {
initAMap() {
let that = this;
// this.MapLoader().then((AMap) => {
that.map = new AMap.Map("container", {
zoom: 9,
center: [116.44923, 40.207714],
pitch: 0,
viewMode: "3D",
});
// 异步加载插件
// AMap.ToolBar: 滑动工具条, AMap.Scale: 比例尺
// 一次加载多个
AMap.plugin("AMap.DistrictSearch", ()=> {
var district = new AMap.DistrictSearch({
extensions: "all",
subdistrict: 0,
level: "district",
});
district.search("北京市", 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),
]; // 使得遮盖填充反向
console.log(result,9999)
var holes = result.districtList[0].boundaries; // 得到该区域的边界坐标集合
var pathArray = [outer];
pathArray.push.apply(pathArray, holes);
var polygon = new AMap.Polygon({
pathL: pathArray,
//线条颜色,使用16进制颜色代码赋值。默认值为#006600
strokeColor: "#6e93f9",
strokeWeight: 2,
fillColor: "rgba(255,255,255)",
fillOpacity: 1,
strokeStyle: "dashed",
strokeDasharray: [2, 2],
});
polygon.setPath(pathArray);
that.map.add(polygon);
},
},
};
</script>
<style scoped>
/*隐藏高德地图logo,版本号*/
/deep/ .amap-logo {
visibility: hidden;
}
/deep/ .amap-copyright {
visibility: hidden;
}
</style>