欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

高德地图遇到的坑(vue2.0 3.0)授权的功能

程序员文章站 2024-03-16 23:35:28
...

**

配置很关键而且https很重要必学要(vue-amap)可以不使用

**
高德地图遇到的坑(vue2.0 3.0)授权的功能3.0在vue.config.js的module加上这高德地图配置这个

高德地图遇到的坑(vue2.0 3.0)授权的功能 2.0在这个地方放这个地图的扩展

高德地图遇到的坑(vue2.0 3.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;
        },

弹出授权完成获得定位