uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)

简介: uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)

打开地图选择位置

代码实现

<view style='padding: 20px;'>
  <u-form-item required label="地点" prop="place">
    <u-cell-group>
      <u-cell :value="place.name?'':'请选择'   " isLink @click="choosePlace">
        <u--text slot='title' :text="place.name"></u--text>
      </u-cell>
    </u-cell-group>
  </u-form-item>
</view>
place: {},
 
choosePlace() {
  let that = this
  uni.chooseLocation({
    success: function(res) {
      that.place = res
      console.log('位置名称:' + res.name);
      console.log('详细地址:' + res.address);
      console.log('纬度:' + res.latitude);
      console.log('经度:' + res.longitude);
    }
  });
},

调试技巧

微信编辑器中点击没反应,需使用 PC 端预览调试

在PC端预览的微信小程序中,打开调试工具

最终效果

打开地图显示位置(可开启导航)

place 为上文中获取到的地址信息对象

openLocation(place) {
  uni.openLocation({
    ...place,
    success: function() {
      console.log('success');
    }
  });
},

官方文档详见

https://uniapp.dcloud.net.cn/api/location/open-location.html#openlocation


目录
相关文章
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
11 2
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的高校宿舍信息管理系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的高校宿舍信息管理系统小程序附带文章源码部署视频讲解等
8 1
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的电影交流平台小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的电影交流平台小程序附带文章源码部署视频讲解等
9 1
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的电器维修系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的电器维修系统小程序附带文章源码部署视频讲解等
8 1
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的“狮子狗”二手交易微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的“狮子狗”二手交易微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
5 0
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的贵工程寝室快修小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的贵工程寝室快修小程序附带文章源码部署视频讲解等
9 0
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生校园兼职微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生校园兼职微信小程序附带文章源码部署视频讲解等
11 1
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的二手物品交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的二手物品交易平台附带文章源码部署视频讲解等
9 1
|
2天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的校园论坛系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的校园论坛系统的详细设计和实现(源码+lw+部署文档+讲解等)
9 0
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的酒店管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的酒店管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
6 0