1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
| import AMapLoader from "@amap/amap-jsapi-loader"; //引入
import Amap from "amap";
export default {
data(){
return{
placeSearch:"",
center:[116.397428, 39.90923],
markerList:[],
marker:null,
dialogVisible:true,
map:null,
}
},
methods:{
search(){
AMap.plugin(["AMap.PlaceSearch"], () =>{
this. placeSearch = new AMap.PlaceSearch({
pageSize: 10, //单页显示结果条数
pageIndex: 1, //页码
city: "010", //兴趣点城市
citylimit: true, //是否强制限制在设置的城市内搜索
map: this.map, //展现结果的地图实例
panel: "my-panel", //结果列表将在此容器中进行展示。
autoFitView: true, //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
});
});
this.placeSearch.search("北京", function (status, result) {
//查询成功时，result 即对应匹配的 POI 信息
console.log(result,status)
});
},
initMap(){
AMapLoader.load({
key: "0123456", //申请好的Web端开发者 Key，调用 load 时必填
version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
})
.then((AMap) => {
this.map = new AMap.Map("container",{ // "container" id为container的div
zoom: 11, //地图级别
center: this.center, //地图中心点
viewMode: "2D", //设置地图模式
});
this.map.on("click",this.mapClick)
})
.catch((e) => {
console.error(e); //加载错误提示
});
},
mapClick(e){
if(this.markerList.length!=0){
this.map.remove(this.marker)
}
let {lat,lng}=e.lnglat
this.markerList=[lng,lat]
this.marker = new AMap.Marker({
position: this.markerList
});
this.map.add(this.marker);
},
},
mounted(){
this.initMap()
}
}
|
