1.申请web的KEY和密钥
2.使用 地图 JS API v2.0
地图 JS API v2.0
3.前端代码
安装
npm i @amap/amap-jsapi-loader --save
main.js中加入代码
window._AMapSecurityConfig = {
//将http://1.1.1.1:80替换为实际代理地址
securityJsCode:'申请的安全密钥',
}
MapContainer,vue 子组件
<template>
<div id="container"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
data() {
return {
map: null,
marker: null,
circle: null
};
},
mounted() {
//DOM初始化完成进行地图初始化
this.initMap();
},
methods: {
initMap() {
AMapLoader.load({
key: "", //设置您的key
version: "2.0",
plugins: ["AMap.ToolBar", "AMap.Driving", "AMap.AutoComplete","AMap.PlaceSearch"],
AMapUI: {
version: "1.1",
plugins: []
},
Loca: {
version: "2.0"
}
})
.then(AMap => {
this.map = new AMap.Map("container", {
viewMode: "3D",
zoom: 11,
zooms: [2, 22],
center: [118.892074, 31.328678]
//设置地图的中心点坐标
});
this.map.setCity("全国");//设置地图刷新之后定位的城市
})
.catch(e => {
console.log(e);
});
},
//父组件传入搜索的地点关键字
searchAddress(name) {
console.log("111----", name);
var that = this;
this.map.plugin("AMap.AutoComplete", function() {
// 实例化Autocomplete
var autoOptions = {
city: "上海" //设置要搜素的城市区域
};
var autoComplete = new AMap.Autocomplete(autoOptions);
autoComplete.search(name, function(status, result) {
let adds = result.tips.map(item => {
return {
label: item.name,
value: item.id,
location: item.location
};
});
// 向父组件传值
that.$emit("getAdds", adds);
});
});
},
// poi定位搜索附近的地点 (中心点经纬度,范围)
placeSearch(lng, lat, radius) {
var that = this
this.map.plugin("AMap.PlaceSearch", function() {
//构造地点查询类
var placeSearch = new AMap.PlaceSearch({
pageSize: 100, // 单页显示结果条数
pageIndex: 1, // 页码
city: "025", // 兴趣点城市
citylimit: true, //是否强制限制在设置的城市内搜索
map: that.map, // 展现结果的地图实例
panel: "panel", // 结果列表将在此容器中进行展示。
autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
});
var cpoint = [lng, lat]; //中心点坐标
placeSearch.searchNearBy("超市", cpoint, radius, function(status, result) {
console.log("-------------",result)
that.map.setFitView();
});
});
},
// 使用覆盖物画出范围
write(lng, lat, radius) {
var that = this;
//如已有覆盖物,则都移除
if (that.marker) {
this.map.remove(that.marker);
}
if (that.circle) {
this.map.remove(that.circle);
}
// 设置标记点和园
this.marker = new AMap.Marker({
icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
position: [lng, lat]
});
this.circle = new AMap.Circle({
center: new AMap.LngLat(lng, lat), // 圆心位置
radius: radius, //半径
strokeColor: "#F33", //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 3, //线粗细度
fillColor: "#ee2200", //填充颜色
fillOpacity: 0.35 //填充透明度
});
// 在地图中加入覆盖物
this.map.add(that.marker);
this.map.add(that.circle);
this.placeSearch(lng, lat, radius)
}
}
};
</script>
<style scoped>
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
</style>