20秒使用vue高德地图绘制行政区域
2020-10-23 本文已影响0人
顺小星
效果图：
image.png
步骤一：先在最外成html挂载行政区域所用的代码
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=你的高德地图key值&plugin=Map3D,ElasticMarker,AMap.Geocoder,AMap.Geolocation,AMap.Driving,AMap.DistrictSearch"></script>
步骤二：直接赋值代码：
<template>
<div class="map" id="map"></div>
</template>
<script>
import AMap from "AMap";
export default {
data() {
return {
weXinAmapMap: null,
};
},
watch: {},
created() {},
mounted() {
this.mapInit('map');
},
methods: {
mapInit(domName) {
let _self = this;
let domDiv = domName || 'map'
_self.weXinAmapMap = new AMap.Map(domDiv, {
center: [118.54436,33.011971],
mapStyle: "amap://styles/1610afaf5f3e06b9757b81fce626e050",
zooms: [1, 18],
zoom: 9.6,
});
AMap.event.addListener(_self.weXinAmapMap, "click", function(e) {
var x = e.lnglat.getLng();
var y = e.lnglat.getLat();
});
_self.drawDistrictBorder();
},
/*
*@description:绘制盱眙县的区域边界图
*@date: 2020-09-20 14:42:15
*/
drawDistrictBorder() {
let _self = this;
//加载行政区划插件
var district = null;
var opts = {
subdistrict: 0, //获取边界不需要返回下级行政区
extensions: "all", //返回行政区边界坐标组等具体信息
level: "district", //查询行政级别为 市
};
district = new AMap.DistrictSearch(opts);
//设置行政区
district.setLevel("district");
district.search("盱眙县", function(status, result) {
var polygons = [];
var bounds = result.districtList[0].boundaries;
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {
//生成行政区划polygon
var polygon = new AMap.Polygon({
strokeWeight: 3,
strokeColor: "#00F6FF",
path: bounds[i],
fillColor: '#00F6FF',
fillOpacity: 0.1,
});
polygons.push(polygon);
}
}
_self.weXinAmapMap.add(polygons);
});
},
}
};
</script>
<style scoped>
.map {
margin-left: 20px;
width: 776px;
height: 600px;
}
</style>
