vue中使用vue amap组件调用高德地图:
通过标签的方式
附上文档:https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install
(1)、地图安装及显示
1、npm install vue-amap --save
2、在main.js中初始化高德地图
import AMap from 'vue-amap';
Vue.use(AMap);
// 初始化vue-amap
AMap.initAMapApiLoader({
// 申请高德的key
key: 'key',
// 插件集合 (插件按需引入)
plugin: ['AMap.Autocomplete','AMap.Geolocation','Geocoder', 'AMap.PlaceSearch', 'AMap.Marker', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']
});
3、下面我们把地图先渲染到DOM上
zoom为地图的缩放等级取值范围3-18移动端取值3-19
plugin为地图的基本配置
center是地图的中心点[经度,纬度]
events是地图的事件
<!--地图显示-->
<el-amap vid="amapDemo" :zoom="zoom" :plugin="plugin"
:center="center" :clickable="enableclick"
:events="markerEvents">
</el-amap>
(1)、地图的基本配置
zoom: 4,
center: [116.397428, 39.909232],
plugin: [
{
enableHighAccuracy: true, //是否使用高精度定位,默认:true
timeout: 100, //超过10秒后停止定位,默认:无穷大
maximumAge: 0, //定位结果缓存0毫秒,默认:0
convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
showButton: true, //显示定位按钮,默认:true
buttonPosition: "RB", //定位按钮停靠位置,默认:'LB',左下角
showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true
showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true
panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:f
extensions: "all",
pName: "Geolocation",
events: {
init(o) {
// o 是高德地图定位插件实例
o.getCurrentPosition((status, result) => {
if (result && result.position) {
self.lng = result.position.lng;
self.lat = result.position.lat;
console.log("本地坐标为:" + [self.lng, self.lat]);
self.center = [self.lng, self.lat];
self.loaded = true;
self.address = result.formattedAddress;
//此处为本地坐标显示在坐标上方的文字
html代码如下↓
<el-amap-text :text="texts.text" :offset="texts.offset" :position="texts.position">
</el-amap-text>
offset为偏移量;取值方式为数组形式:[5,-30]
js代码↓
self.texts.position = [self.lng, self.lat];
self.texts.text = "我在 " + result.formattedAddress + " 附近";
// console.log(self.address)
self.$nextTick();
}
});
}
}
}
],
(2)地图绑定的点击事件
主要通过高德SDK内置的方法获取到坐标点和地址
markerEvents: {
click(e) {
self.markers = [];
console.log([e.lnglat.lng, e.lnglat.lat])//可以拿到点击的坐标
let marker = {
position: [e.lnglat.lng, e.lnglat.lat]
};
self.markers.push(marker);
// 这里通过高德 SDK 完成。通过高德SDK内置的方法获取到坐标点和地址
var geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
geocoder.getAddress([e.lnglat.lng, e.lnglat.lat], function(
status,
result
) {
if (status === "complete" && result.info === "OK") {
if (result && result.regeocode) {
//这里我给弹框赋值点击的坐标和地址
self.window.position = [e.lnglat.lng, e.lnglat.lat];
self.window.content = result.regeocode.formattedAddress
self.$nextTick();
}
}
});
}
},
(3)在地图上点击添加点位
let marker = {
position: [e.lnglat.lng, e.lnglat.lat]
};
self.markers.push(marker);
以上代码中点击时往markers里添加了点坐标那么我们只需要循环拿出来即可
<el-amap-marker v-for="(marker,index) in markers" :position="marker.position" :key="index">
</el-amap-marker>
(4)下面是搜索显示点位的功能:
searchOption搜索条件
onSearchResult搜索回调函数
<el-amap-search-box class="search-box"
:search-option="searchOption"
:on-search-result="onSearchResult">
</el-amap-search-box>
属性:
searchOption: {
city: "海淀区",//限制城市
citylimit: true//是否限制城市内搜索
},
方法:
onSearchResult(pois) {
console.log(this.searchOption.ctiy);
this.markers.length = [];
this.zoom = 17;
this.center = [pois[0].lng, pois[0].lat];
let latSum = 0;
let lngSum = 0;
if (pois.length > 0) {
pois.forEach(poi => {
let { lng, lat } = poi;
lngSum += lng;
latSum += lat;
let name = poi;
let marker = {
position: [poi.lng, poi.lat],
name: poi.name
};
this.markers.push(marker);
});
let center = {
lng: lngSum / pois.length,
lat: latSum / pois.length
};
this.mapCenter = [center.lng, center.lat];
}
}