uni-app中小程序地图选点

道可道道尽道 發表於 2021-6-9 15:13:00

最近在项目中要用到小程序地图选点，查了些许资料，特别在此记录一下，以便大家参考交流！，我选择用的是腾讯地图插件
实现效果：<img src="https://img2020.cnblogs.com/blog/1860986/202106/1860986-20210609150617532-1115333184.png">
 
 
 
 1、去小程序开通腾讯腾讯位置服务
<img src="https://img2020.cnblogs.com/blog/1860986/202106/1860986-20210609150739897-1544163239.png">
 
 
 
2、按照要求一步步操作，申请秘钥，添加项目  https://lbs.qq.com?lbs_invite=Y9PRFLY
3、选择设置，三方设置，添加的时候选择“腾讯位置服务地图选点”
<img src="https://img2020.cnblogs.com/blog/1860986/202106/1860986-20210609150851085-1612458023.png">
 
 
 4、uni-app中页面配置：
<img src="https://img2020.cnblogs.com/blog/1860986/202106/1860986-20210609151048932-415166937.png">
 
 
 https://lbs.qq.com/miniProgram/plugin/pluginGuide/locationPicker
5、页面展示：
<div class="cnblogs_code">
<pre><template>
<view>
 您已选择：{{chooseLocation}}
</view>
</template>

<script>
export default {
 data() {
 return {
 chooseLocation: '中国',
 }
 },
 onLoad() {
 this.getAddress();
 },
 // 从地图选点插件返回后，在页面的onShow生命周期函数中能够调用插件接口，取得选点结果对象
 onShow() {
 const chooseLocation = requirePlugin('chooseLocation');
 const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
 console.log("您所选择的位置：", location);
 if(location){
 this.chooseLocation = location.address;
 }

 },
 onUnload() {
 // 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
 chooseLocation.setLocation(null);
 },
 methods: {
 getAddress() {
 const key = ''; //使用在腾讯位置服务申请的key
 const referer = ''; //调用插件的app的名称
 const location = JSON.stringify({
 latitude: 39.89631551,
 longitude: 116.323459711
 });
 // const category = '生活服务,娱乐休闲';
 wx.navigateTo({
 url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer
 });
 },
 }
}
</script>

<style>

</style></pre>
</div>
好啦，这样就大功告成啦！
  
来源：https://www.cnblogs.com/menxiaojin/p/14866987.html

頁: [1]

琼殿技术论坛's Archiver

uni-app中小程序地图选点