先去高德开放平台申请一个web端的key。
2022年后申请的key,必须和它生成的secret一起使用。
可使用服务选择web端
在vue项目中,可以通过直接引入js文件,也可以安装vue-amap等插件使用。
npm i @amap/amap-jsapi-loader --save
<script>
window._AMapSecurityConfig = {
// 例如 :serviceHost:'http://1.1.1.1:80/_AMapService', //安全写法,前面是服务器地址
// securityJsCode: "xxxkey" //测试时候的写法
};
script>
配置好基础的信息后,就可以开始使用了
<template>
<div id="container"></div>
</template>
<script type="text/javascript">
</script>
<script>
import AMapLoader from "@amap/amap-jsapi-loader"; //医用文件
let district;
let geoCorder;
let marker;
export default {
props: {
data: {
type: Object
}
},
data() {
return {
map: null,
polygons: []
};
},
mounted() {
this.initMap();
},
methods: {
initMap() {
// console.log(data)
AMapLoader.load({
key: "xxx", // 申请好的Web端开发者Key,首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: ["AMap.DistrictSearch", "AMap.Geolocation", "AMap.Geocoder"] // 需要使用的的插件列表,如比例尺'AMap.Scale'等
})
.then(AMap => {
this.map = new AMap.Map("container", {
//设置地图容器id
viewMode: "2D", //是否为3D地图模式
zoom: 3
});
var opts = {
subdistrict: 0, //返回下一级行政区
extensions: "all", //返回行政区边界坐标组等具体信息
level: "city" //查询行政级别为 市
};
district = new AMap.DistrictSearch(opts); //行政区查询插件
geoCorder = new AMap.Geocoder();
//进入就显示整个国家范围
district.search("中国", function(status, result) {
console.log(status, result);
});
})
.catch(e => {
console.log(e);
});
},
//父页面选择选项后,调取子页面的方法
/**父页面 value[2]大概格式,也是高德地图的
{
text: "三水区"
value: "440607"
}
**/
this.$refs.maps.setDistrict(value[2]);
---
//map.vue内
// 设置完省市区后,地图跳转到设置好的区域来
//polygons是绘制边界线的经纬度数组
setDistrict(adcode) {
for (var i = 0, l = this.polygons.length; i < l; i++) {
this.polygons[i].setMap(null);
}
district.search(adcode, (status, result) => {
if (status === "complete") {
this.getData(result.districtList[0]);
}
});
},
// 设置数据
getData(data) {
let _this = this;
var bounds = data.boundaries;
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {
var polygon = new AMap.Polygon({
map: this.map,
strokeWeight: 1,
strokeColor: "#0091ea",
fillColor: "#80d8ff",
fillOpacity: 0.2,
path: bounds[i]
});
_this.polygons.push(polygon);
}
this.map.setFitView(); //地图自适应
this.map.setZoom(11);
}
}
//边界外的点击事件
this.map.on("click", e => {
// console.log(e, "点击事件");
if (marker) {
this.map.remove(marker);
}
marker = new AMap.Marker({
position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat)
});
this.map.add(marker);
this.regeoCoder(e);
});
//边界内的点击事件
polygon.on("click", function(e) {
// console.log(e, "点击事件");
if (marker) {
_this.map.remove(marker);
}
marker = new AMap.Marker({
position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat)
});
_this.map.add(marker);
_this.regeoCoder(e);
});
//点击获取详细地址
regeoCoder(e) {
let address = {
lng: e.lnglat.lng,
lat: e.lnglat.lat
};
geoCorder.getAddress(e.lnglat, (status, result) => {
if (status === "complete") {
// 传递数据 result.regeocode.formattedAddress就是从省级开始的详细地址
this.$emit("getValue", address, result.regeocode.formattedAddress);
}
});
},
最终成果如开头动图所示