uniapp之腾讯地图使用

466 阅读1分钟

步骤:

  1. 在官网进行注册账号
  2. 申请地图,获取key
  3. 在uniapp中的manifest.json文件中引入SDK
  4. 在需要获取当前位置的页面中,引入腾讯地图SDK

代码:


<u-icon label="重新定位" size="35rpx" name="/static/img/location.png" labelSize="28rpx"
										labelColor="#909399" @click="get_current_position"></u-icon>
                                                                                
import qqmapsdk from "@/common/js/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js";

methods: {
  get_current_position() {
    let self = this;
    this.location_loading = true;
    uni.getLocation({
		type: 'gcj02 ',
		geocode: true,
		success: function(res) {
			const QQMapWX = new qqmapsdk({
				key: "LX4BZ-HKMK2-OOUU3-COQFL-57GUS-HSBWS"
			});
			uni.setStorageSync('lat', res.latitude)
			uni.setStorageSync('lng', res.longitude)
			QQMapWX.reverseGeocoder({
				location: {
					latitude: res.latitude,
					longitude: res.longitude
				},
				success: function(info) {
					setTimeout(function() {
						self.location_city = info.result.address_component.city;					
                                                self.choose_info.search_info = info.result
										.address_component.street;
										
						self.location_loading = false;
								}, 500);
							},
				fail: function(err) {
					console.log('fail:' + err);
					uni.$u.total = '定位失败,请手动定位';
					self.location_loading = false;
				},
			});
		},fail(err) {
			console.log(err)
		},
	}); 
},
}