小程序-地图
2022-04-10 本文已影响0人
禾苗种树
-
步骤
1.登录微信公众平台-开发-开发工具-开发能力,开通腾讯位置服务
并注册
2.微信公众平台-设置-第三方设置-腾讯位置服务-授权
2-1.添加插件-搜索-腾讯位置服务地图选点
2-1.添加插件-搜索-腾讯位置服务城市选择器3.小程序
3-1:引入插件
//app.js
"plugins": {
"chooseLocation": {
"version": "1.0.5",
"provider": "wx76a9a06e5b4e693e"
}
},
3-2:设置定位授权
地图选点插件需要小程序提供定位授权才能正常使用定位功能(用户可以看见弹框提醒?)
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序定位"
}
}
3-3
//xxx.js代码
"use strict";
const chooseLocation = requirePlugin('chooseLocation');
Page({
data: {
address: "",
locationName: ""
},
onShow: function () {
// 从地图选点插件返回后,在页面的onShow生命周期函数中能够调用插件接口,取得选点结果对象
// 如果点击确认选点按钮,则返回选点结果对象,否则返回null
const location = chooseLocation.getLocation();
if(location){
this.setData({
address: location.address?location.address : "",
locationName: location.name?location.name : ""
});
}
},
//显示地图
showMap() {
//使用在腾讯位置服务申请的key(必填)
const key = "";
//调用插件的app的名称(必填)
const referer = "";
wx.navigateTo({
url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer
});
}
});
<!--xxx.wxml-->
<view class="container">
<button bindtap="showMap">选择位置</button>
<view style="margin-top:10px">地址:{{address?address:"暂无"}}</view>
<view style="margin-top:10px">名称:{{locationName?locationName:"暂无"}}</view>
</view>