高德地图遇到的坑(vue2.0 3.0)授权的功能
程序员文章站
2024-03-16 23:35:28
...
**
配置很关键而且https很重要必学要(vue-amap)可以不使用
**
3.0在vue.config.js的module加上这高德地图配置这个
2.0在这个地方放这个地图的扩展
在页面上引入高德地图的js就行 (2.0为例)
import AMap from 'AMap'; //引入地图
import { Swipe, SwipeItem, Toast, Indicator } from "mint-ui";
methods: { // 放在方法里 在用 在mounted调用下
getLocation() { // 定位
const ts = this;
AMap.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是具体的定位信息
var distent = '';
ts.$axios.post(ts.baseURL + "/h5/shop/getShops", {}).then(res => {
if (res.data.code == 1) {
ts.shop_list = res.data.data;
for (var i = 0; i < ts.shop_list.length; i++) {
var strs = new Array(); //定义一数组
strs = ts.shop_list[i].shop_point.split(",");
var s = ts.GetDistance(strs[1],strs[0], data.position.lat, data.position.lng);
ts.shop_list[i].discent = s
if (!distent) {
distent = ts.shop_list[i].discent
} else if (distent > ts.shop_list[i].discent) {
distent = ts.shop_list[i].discent
ts.shop = ts.shop_list[i].shop_desc;
ts.shop_id = ts.shop_list[i].id;
}
sessionStorage.setItem('shop_msg',JSON.stringify({
shop: ts.shop,
shop_id: ts.shop_id,
}));
}
ts.getSlideshow(); // 请求页面的接口
}
});
}
function onError(data) {
// 定位出错
if (ts.ispc) {
ts.getLngLatLocation();
} else {
ts.$axios.post(ts.baseURL + "/h5/shop/getShops", {}).then(res => {
if (res.data.code == 1) {
ts.shop_list = res.data.data;
sessionStorage.setItem('shop_msg',JSON.stringify({
shop: ts.shop_list[0].shop_desc,
shop_id: ts.shop_list[0].id,
}));
ts.shop = ts.shop_list[0].shop_desc;
ts.shop_id = ts.shop_list[0].id;
Toast({
message: '定位失败没开启GPS定位,请选择的门店位置',
position: "middle",
duration: 2000
})
}
ts.getSlideshow();
});
}
}
});
},
// IP定位获取当前城市信息
getLngLatLocation() {
AMap.plugin("AMap.CitySearch", function() {
var citySearch = new AMap.CitySearch();
citySearch.getLocalCity(function(status, result) {
if (status === "complete" && result.info === "OK") {
// 查询成功,result即为当前所在城市信息
Toast({
message: '定位失败,请选择的门店位置',
position: "middle",
duration: 20000
})
}
});
});
// 方法定义 lat,lng 计算多少米
GetDistance(lat1, lng1, lat2, lng2) {
var radLat1 = lat1*Math.PI / 180.0;
var radLat2 = lat2*Math.PI / 180.0;
var a = radLat1 - radLat2;
var b = lng1*Math.PI / 180.0 - lng2*Math.PI / 180.0;
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
s = s *6378.137 ;// EARTH_RADIUS;
s = Math.round(s * 10000) / 10000;
return s;
},
弹出授权完成获得定位