uniapp 引入腾讯地图并且进行定位

首先：https://lbs.qq.com/miniProgram/plugin/pluginGuide/routePlan 这是腾讯地图地址

安装一波（这是为了防止出现腾讯地图跨域问题）

npm i --save vue-jsonp

在 main.js 文件

// 引入腾讯地图
import {VueJsonp} from 'vue-jsonp'
Vue.use(VueJsonp)

manifest.json 文件开始配置

复制进去就行

搜索：usingComponents

"plugins": {
            "routePlan": {
            "version": "1.0.12",
            "provider": " 小程序的APPID "
            }
        },
        "permission": {
            "scope.userLocation": {
                "desc": "位置信息效果展示"
            }
        }

配置上自己的小程序appid

配置上去腾讯地图创建的key

最后，在应用的文件

<!-- :polyline="polyline" --> //点 连城线，需要的可以自己配置
        <map style="width: 100%; height: 300px;" :circles="circles" :scale="scale"
            :latitude="latitude" :longitude="longitude" :markers="covers">
            <!-- <cover-view class="cover-view" @click="onControltap"></cover-view> -->
        </map>

data定义显示默认定位

// title: 'map',
                latitude: 22.571164, // 默认的经纬度
                longitude: 113.926937,
                covers: [{
                        // 开始的经纬度
                        latitude: 22.573164, //纬度
                        longitude: 113.926937, //经度
                        // #ifdef APP-PLUS
                        iconPath: '../../../static/image/location@3x.png', //显示的图标
                        // #endif
                        // #ifndef APP-PLUS
                        iconPath: '../../../static/location.png', //显示的图标
                        // #endif
                        // title: '阿打算', //标注点名
                        label: {
                            //为标记点旁边增加标签
                            // content: '文本1', //文本
                            color: '#F76350', //文本颜色
                            // anchorX: 0, //label的坐标，原点是 marker 对应的经纬度
                            // anchorY: -80, //label的坐标，原点是 marker 对应的经纬度
                            bgColor: '#fff', //背景色
                            padding: 5, //文本边缘留白
                            borderWidth: 1, //边框宽度
                            borderColor: '#D84C29', //边框颜色
                            textAlign: 'right' //文本对齐方式。
                        },
                        callout: {
                            content: '当前所在',
                            color: '#F76350',
                            fontSize: 12
                        }
                    },
                    {
                        // 圆圈所在的点 =》 终点
                        latitude: 22.57147,
                        longitude: 113.92663,
                        // #ifdef APP-PLUS
                        iconPath: '../../../static/image/location@3x.png', //显示的图标
                        // #endif
                        // #ifndef APP-PLUS
                        iconPath: '../../../static/location.png', //显示的图标
                        // #endif
                        // iconPath: '../../static/image/personal_center.png',
                        // title: '阿迪达斯',
                        // x: 39.9,
                        // y: 116.399,
                        label: {
                            // content: '打卡范围',
                            color: '#F76350',
                            bgColor: '#fff',
                            padding: 5,
                            borderRadius: 4
                        },
                        callout: {
                            content: '打卡范围',
                            color: '#F76350',
                            fontSize: 12
                        }
                    }
                ],
                scale: 15, //地图层级
                // controls: [{
                //  //在地图上显示控件，控件不随着地图移动
                //  id: 1, //控件id
                //  // iconPath: '../../static/image/equipment_deployment_two.png', //显示的图标
                //  position: {
                //      //控件在地图的位置
                //      left: 15,
                //      top: 15,
                //      width: 50,
                //      height: 50
                //  }
                // }],
                //在地图上显示圆
                circles: [{
                    latitude: 22.57147,
                    longitude: 113.92663,
 
                    fillColor: '#AACCEE32', //填充颜色
                    color: '#AACCEE', //描边的颜色
                    radius: 100, //半径
                    strokeWidth: 2 //描边的宽度
                }],
                // polyline: [{ //根据点画线
                //  //指定一系列坐标点，从数组第一项连线至最后一项 => 第一个输入开始点， 第二个输入结束点
                //  // points: [{ latitude: 22.57147, longitude: 113.92663 }, { latitude: 22.57091694019413, longitude: 113.9270532131195 }],
                //  points: [],
                //  color: '#0000AA', //线的颜色
                //  width: 2, //线的宽度
                //  dottedLine: true, //是否虚线
                //  arrowLine: true //带箭头的线 开发者工具暂不支持该属性
                // }]

methods 方法 /=

//坐标转腾讯地图坐标
            bMapTransQQMap(lng, lat) {
                let locationObj = lat + ',' + lng;
                let url = 'https://apis.map.qq.com/ws/coord/v1/translate';
                var that = this
                this.$jsonp(url, {
                    key: 'KKSBZ-53WRP-GBSD7-LE373-SGAQO-6UB7I',
                    locations: locationObj,
                    type: 1,
                    output: 'jsonp'
                }).then(res => {
 
                    that.latitude = res.locations[0].lat
                    that.longitude = res.locations[0].lng
 
                    that.covers[0].latitude = res.locations[0].lat
                    that.covers[0].longitude = res.locations[0].lng
                    //判断是否在规定打卡距离以内
                    that.GetDistance(that.covers[0].latitude, that.covers[0].longitude, that.covers[1].latitude,
                        that.covers[1].longitude)
 
                })
 
            },
            //获取当前位置 =》 由于腾讯地图获取定位会飘，因此采用原生获取定位的方法。目前项目应用中属于最准确的一个，没有之一。
            getAddress() {
                if (navigator.geolocation) {
                    var that = this
                    var timer = navigator.geolocation.watchPosition(
                        function(ev) { //step3：用经纬度描述具体位置
                            // alert(parseFloat(ev.coords.longitude));
                            // alert(parseFloat(ev.coords.latitude));
                            that.bMapTransQQMap(parseFloat(ev.coords.longitude), parseFloat(ev.coords.latitude))
                        },
                        function(err) {
                            alert('定位超时，请稍后再试!')
                            // alert(err.code)
                            // alert(err.message)
                            //清除多次地理位置定位
                            navigator.geolocation.clearWatch(timer);
                        }, {
                            /*数据收集 :  json的形式
                             enableHighAcuracy  :  更精确的查找，默认false
                             timeout  :指定获取地理位置的超时时间，默认不限时，单位为毫秒
                             maximumAge :最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
                             */
                            enableHighAccuracy: true,
                            maximumAge: 2000
                        })
                } else {
                    alert('您的浏览器不支持geolocation定位！,请更换浏览器');
                }
            },
             
            // 方法定义 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 * 6378137.0; // EARTH_RADIUS;
                s = Math.round(s * 10000) / 10000;
                this.dakajuli = parseFloat(s)
            },