高德地图参考手册
高德地图api
高德行政查询实例
vue-map
npm install vue-amap --save
main.js
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
// 高德key
key: 'key值',
// 插件集合 (插件按需引入)
plugin: ['AMap','AMap.DistrictSearch'],
// 高德 sdk 版本,默认为 1.4.4
v:'1.4.4',
uiVersion: '1.0'
});
map.vue
<template>
<div class="warp">
<div class="footers">
<div class="amap-page-container">
<el-amap
vid="amapDemo"
:zoom="zoom"
:center="center"
class="amap-demo"
style=" height: 700px;"
ref="map"
>
<el-amap-polygon
StrokeColor="#fff"
v-for="(polygon,index) in polygons"
:key="index"
:path="polygon.F.path">
</el-amap-polygon>
</el-amap>
</div>
</div>
</div>
</template>
<script>
module.exports = {
data() {
return {
zoom:7,
center:[116.397128,39.916527],
polygons:[],
district:null
}
},
methods: {
drawBounds(){
var that = this;
//加载行政区划插件
if(!that.district){
var opts = {
subdistrict: 0, //获取边界不需要返回下级行政区
extensions: 'all', //返回行政区边界坐标组等具体信息
level: 'city' //查询行政级别为 市
};
//实例化DistrictSearch
that.district = new AMap.DistrictSearch(opts);
}
//查询目标 江西
that.district.search("九江", function(status, result) {
// map.remove(polygons)//清除上次结果
//创建行政区域变量 局部变量
that.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({
// bubble:true, //鼠标点击事件
cursor:"pointer", //鼠标样式
strokeWeight: 2, //轮廓线宽度
path: bounds[i], //多边形节点
fillOpacity: 0, //多边形填充透明度
fillColor: '#fff', //多边形填充颜色
strokeColor: '#0091ea' //线条颜色
});
that.polygons.push(polygon); //添加查询结果
}
}
AMap.Polygon.bind(that.polygons) //绑定地图 polygons 添加行政区域
that.$refs.map.$amap.setFitView(that.polygons)//视口自适应
});
}
},
created(){
setTimeout(()=>{
this.drawBounds()
},2000)
}
};
</script>
<style scoped lang="scss">
.warp {
.footers {
height: 50%;
// background: cadetblue;s
}
}
</style>