标签：map Vue polygon script window AMap new true Amap
一、引入高德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-width: 0;
font-size: 16px;
transform: scale(1);
}
.info-top > img {
position: absolute;
right: 0px;
top: 0px;
width: 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="width: 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 {
width: 100%;
height: 500px;
}
</style>
标签：map,Vue,polygon,script,window,AMap,new,true,Amap 来源： https://www.cnblogs.com/gongyuhonglou/p/16181908.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。