vue使用高德地图,精确定位&ip定位,获取城市、地区位置
1、高德地图准备点进入网址:https://lbs.amap.com/api/javascript-api/guide/abc/prepare(1)注册开发者账号(2)进入控制台(3)申请高德地图key2.在页面添加 JS API 的入口脚本标签<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&
·
1、高德地图准备
点进入网址:https://lbs.amap.com/api/javascript-api/guide/abc/prepare
(1)注册开发者账号
(2)进入控制台
(3)申请高德地图key
2.在页面添加 JS API 的入口脚本标签
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
3.vue中使用
// methods部分
getLocation() {
const self = this
AMap.plugin('AMap.Geolocation', function () {
var geolocation = new AMap.Geolocation({
// 是否使用高精度定位,默认:true
enableHighAccuracy: true,
// 设置定位超时时间,默认:无穷大
timeout: 10000,
})
geolocation.getCurrentPosition()
AMap.event.addListener(geolocation, 'complete', onComplete);
AMap.event.addListener(geolocation, 'error', onError);
function onComplete(data) {
// data是具体的定位信息
console.log('定位成功信息:', data);
}
function onError(data) {
// 定位出错
console.log('定位失败错误:', data);
// 调用ip定位
self.getLngLatLocation();
}
})
},
getLngLatLocation() {
AMap.plugin('AMap.CitySearch', function () {
var citySearch = new AMap.CitySearch();
citySearch.getLocalCity(function (status, result) {
if (status === 'complete' && result.info === 'OK') {
// 查询成功,result即为当前所在城市信息
console.log('通过ip获取当前城市:', result)
//逆向地理编码
AMap.plugin('AMap.Geocoder', function () {
var geocoder = new AMap.Geocoder({
// city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode
city: result.adcode
})
var lnglat = result.rectangle.split(';')[0].split(',');
geocoder.getAddress(lnglat, function (status, data) {
if (status === 'complete' && data.info === 'OK') {
// result为对应的地理位置详细信息
console.log(data)
}
})
})
}
})
})
}
// created 中调用
created () {
// 此处为调用精确定位之后,调取ip定位,可根据实际情况改写
this.getLocation();
}
更多推荐
已为社区贡献1条内容
所有评论(0)