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

2021-12-07 14:33:19 阅读：274 来源： 互联网

标签：qq uniapp res 腾讯 longitude latitude jsonp 引入

首先：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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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