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

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

 

 

 

 

 

 

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

npm i --save vue-jsonp

在 main.js 文件

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

　　然后下载在根目录的 js_sdk 文件（ 有就放，如果没有就创建 ）

https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

　　

 

 

 

 

 

 

以上弄完之后，manifest.json 文件开始配置

复制进去就行

搜索：usingComponents

"plugins": {
            "routePlan": {
            "version": "1.0.12",
            "provider": "wx872140196cf22b36"
            }
        },
        "permission": {
            "scope.userLocation": {
                "desc": "位置信息效果展示"
            }
        }

 

配置上自己的小程序appid

 

 

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

 

 

最后，在应用的文件

view>
			<map 
				id="tencentMap" 
				style="height: 30vh;width: 100vw;"
				:longitude="longitude"
				:latitude="latitude" 
			></map>
		</view>

　　

longitude: '',
                latitude: '',
                markers: [],

 

onReady() {
            
            //获取当前地址经纬度
            uni.getLocation({
                success: res => {
                    this.latitude = res.latitude
                    this.longitude = res.longitude
                    this.getUserLocation();
                }
            });
            
        },
        methods:{
            
            //输出定位
            getUserLocation() {
                let vm = this;
                let locationObj = vm.latitude + ',' + vm.longitude;
                let url = 'https://apis.map.qq.com/ws/geocoder/v1?coord_type=5&get_poi=1&output=jsonp&poi_options=page_size=1;page_index=1';
                this.$jsonp(url, {
                    key: 'KKSBZ-53WRP-GBSD7-LE373-SGAQO-6UB7I',
                    location: locationObj
                })
                .then(res => {
                    console.log(res)
                })
                .catch(err => {
                    console.log(err);
                });
    
            },
            
        }

 

标签：qq,uniapp,res,腾讯,longitude,latitude,jsonp,引入
来源： https://www.cnblogs.com/majiayin/p/15655970.html