一、vue使用高德地图通过坐标显示指定位置
1、通过NPM安装vue-amap模块:
npm install --save vue-amap
2、在main.js中引用vue-amap:
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
key: '申请的高德地图Key'
});
3、在vue组件中使用:
<template>
<div>
<el-amap
:center='center'
:zoom='zoom'
>
<el-amap-marker
:position="center"
:label="label"
></el-amap-marker>
</el-amap>
</div>
</template>
<script>
data() {
return {
center: [116.397428, 39.90923], //地址坐标
zoom: 15, //缩放大小
label:{
content: '自定义标题',
offset:[10,12]
}
}
}
</script>
注意:
label 对象中的 content 为下图中的自定义标题文字,offset 为下图中的蓝点位置坐标(具体代表啥,暂时没搞清楚)
原文:传送门
二、 js高德地图获取当前位置信息
<script src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key"></script>
var map = new AMap.Map('mapContainer', {
resizeEnable: true
})
map.plugin('AMap.Geolocation', function () {
var geolocation = new AMap.Geolocation({
// 是否使用高精度定位,默认:true
enableHighAccuracy: true,
// 设置定位超时时间,默认:无穷大
timeout: 10000,
// 定位按钮的停靠位置的偏移量,默认:Pixel(10, 20)
buttonOffset: new AMap.Pixel(10, 20),
// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
zoomToAccuracy: true,
// 定位按钮的排放位置, RB表示右下
buttonPosition: 'RB'
})
// 获取当前位置信息
geolocation.getCurrentPosition();
// 监听获取位置信息成功的回调函数
AMap.event.addListener(geolocation, 'complete', onComplete);
// 监听获取位置信息错误的回调函数
AMap.event.addListener(geolocation, 'error', onError);
function onComplete(data) {
// data是具体的定位信息
console.log(data);
}
function onError(error) {
// 定位出错
console.log(error);
}
})
原文:传送门