vue使用高德地图web端JS API(vue-amap插件)
高德地图地图 JS API v2.0:https://lbs.amap.com/api/jsapi-v2/summary/vue-amap(基于Vue 2.0和高德地图的地图组件):https://elemefe.github.io/vue-amap/#/1、npm安装vue-amapnpm install vue-amap --save2、main.js初始化vue-amapimport AMa
·
高德地图地图 JS API v2.0:https://lbs.amap.com/api/jsapi-v2/summary/
vue-amap(基于Vue 2.0和高德地图的地图组件):https://elemefe.github.io/vue-amap/#/
1、npm安装vue-amap
npm install vue-amap --save
2、main.js初始化vue-amap
import AMap from 'vue-amap'
Vue.use(AMap)
AMap.initAMapApiLoader({
key: '在高德地图平台申请的key',
plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder','AMap.ElasticMarker']//一些需要用到的插件
})
3、在页面中使用
<template>
<div id="container"></div>
<input id="key-input" placeholder="请输入关键字"/>
</template>
<script>
export default{
data(){
return{
map:''
}
},
mounted(){
// 初始化地图,初始化要放在$nextTick里面,一开始使用的话会找不到id="container"的DMO
this.$nextTick(() => {
this.init()
})
},
methods:{
init(){
let that = this
// 初始化
this.map = new AMap.Map('container', {
resizeEnable: true
})
// 输入框输入事件
var autoOptions = {
input: 'key-input'
}
var auto = new AMap.Autocomplete(autoOptions)
var placeSearch = new AMap.PlaceSearch({
map: that.map,
extensions: 'all',
children: 1
})
// 展示下拉选项
AMap.event.addListener(auto, 'select', function(e) {
placeSearch.setCity(e.poi.adcode)
placeSearch.search(e.poi.name)
let data = {
poiAddress: e.poi.name,
region: e.poi.adcode
}
that.mapData = data
})
// 地图鼠标点击事件
this.map.on('click', (e) => {
let lng = e.lnglat.lng
let lat = e.lnglat.lat
let marker = new AMap.Marker({
position: new AMap.LngLat(lng, lat)
})
// 根据点击地图的经纬度获取地址详情
let geocoder = new AMap.Geocoder({ batch: false, city: '' })
geocoder.getAddress([lng, lat], function(status, res) {
if (res.info == 'OK') {
// 显示点标志的信息窗口
let infoWindow = new AMap.InfoWindow({
anchor: 'top-left',
content: res.regeocode.formattedAddress
})
infoWindow.open(that.map, [lng, lat])
}
})
that.map.clearMap()// 清除所有覆盖物(点标志)
that.map.add(marker)// 添加点标志
})
}
}
}
</script>
//先初始化
创建地图后
输入框输入事件
地图鼠标点击事件,根据点击地图的经纬度获取地址详情,清除所有覆盖物(点标志),添加点标志
ps:高德地图有一些地区获取有问题,是高德地图自身的问题。比如台湾省,只能获取到省份,区、县都获取不了。。。
pps:如果涉及到敏感问题,请联系删除。谢谢
更多推荐
已为社区贡献7条内容
所有评论(0)