微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例


Posted in Javascript onJanuary 23, 2019

本文实例讲述了微信小程序map组件结合高德地图API实现wx.chooseLocation功能。分享给大家供大家参考,具体如下:

声明

bug: 页面搜索返回的列表在真机测试是会出现不显示问题?
造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡!
解决办法:将该文本视图采用cover-view,放在map中。
感谢: 感谢Lrj_estranged指出问题!

效果图

微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例

实现原理

通过高德地图的微信小程序开发API(getInputtips),实现关键词获取对应提示列表,同时返回location。

WXML

<view class="map-inputtips-input">
 <input bindinput="bindInput" placeholder="搜索" focus="true" />
</view>
<view class="map_container">
 <map class="map" latitude='{{latitude}}' longitude='{{longitude}}' markers='{{markers}}'>
 <cover-view class="map-search-list {{isShow ? '' : 'map-hide'}}">
  <cover-view bindtouchstart="bindSearch" wx:key="searchId" data-keywords="{{item.name}}" data-location="{{item.location}}" class="map-box" wx:for="{{tips}}">
  {{item.name}}
  </cover-view>
 </cover-view>
 </map>
</view>

WXSS

.map-inputtips-input{
 height: 80rpx;
 line-height: 80rpx;
 width: 100%;
 box-sizing: border-box;
 font-size: 30rpx;
 padding: 0 10px;
 background-color: #fff;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 1000;
 border-bottom:1px solid #c3c3c3;
}
.map-inputtips-input input{
 border: 1px solid #ddd;
 border-radius: 5px;
 height: 60rpx;
 line-height: 60rpx;
 width: 100%;
 box-sizing: border-box;
 padding: 0 5px;
 margin-top: 10rpx;
}
.map-box{
 margin: 0 10px;
 border-bottom:1px solid #c3c3c3;
 height: 80rpx;
 line-height: 80rpx;
}
.map-box:last-child{border: none;}
.map-search-list{
 position: fixed;
 top: 80rpx;
 left: 0;
 width: 100%;
 z-index: 1000;
 background-color: #fff;
}

JS

const app = getApp();
const amap = app.data.amap;
const key = app.data.key;
Page({
 data: {
 isShow: false,
 tips: {},
 longitude: '',
 latitude: '',
 markers: []
 },
 onLoad() {
 var _this = this;
 wx.getLocation({
  success: function(res) {
  if (res && res.longitude){
   _this.setData({
   longitude: res.longitude,
   latitude: res.latitude,
   markers:[{
    id:0,
    longitude: res.longitude,
    latitude: res.latitude,
    iconPath: '../../src/images/ding.png',
    width:32,
    height:32
   }]
   })
  }
  }
 })
 },
 bindInput: function (e) {
 var _this = this;
 var keywords = e.detail.value;
 var myAmap = new amap.AMapWX({ key: key });
 myAmap.getInputtips({
  keywords: keywords,
  location: '',
  success: function (res) {
  if (res && res.tips) {
   _this.setData({
   isShow: true,
   tips: res.tips
   });
  }
  }
 })
 },
 bindSearch: function (e) {
 var keywords = e.target.dataset.keywords;
 var location = e.target.dataset.location.split(',');
 this.setData({
  isShow: false,
  longitude: location[0],
  latitude: location[1],
  markers: [{
  id: 0,
  longitude: location[0],
  latitude: location[1],
  iconPath: '../../src/images/ding.png',
  width: 32,
  height: 32,
  anchor: { x: .5, y: 1 },
  label: {
   content: keywords,
   color: 'blue',
   fontSize: 12,
   borderRadius: 5,
   bgColor: '#fff',
   padding: 3,
   x: 0,
   y: -50,
   textAlign: 'center'
  }
  }]
 })
 }
})

总结

1. 输入框事件获取关键字,通过关键字获取展示列表;

2. 列表选择事件,获取对应的location,并通过map组件的 markers 属性标记该坐标。

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
JavaScript入门教程(9) Document文档对象
Jan 31 Javascript
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
分享20款好玩的jQuery游戏
Apr 17 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
Javascript将JSON日期格式化
Aug 23 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
基于JavaScript获取base64图片大小
Oct 18 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
详解JSON.stringify()的5个秘密特性
May 26 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 #Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 #Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 #Javascript
javascript json字符串到json对象转义问题
Jan 22 #Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 #Javascript
微信小程序实现九宫格抽奖
Apr 15 #Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 #Javascript
You might like
PHP动态图像的创建
2006/10/09 PHP
8个出色的WordPress SEO插件收集
2011/02/26 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
php中使用GD库做验证码
2016/03/31 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
跟老齐学Python之dict()的操作方法
2014/09/24 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
剖析Python的Twisted框架的核心特性
2016/05/25 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
pandas通过loc生成新的列方法
2018/11/28 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
大学军训感想
2014/02/12 职场文书
微观世界观后感
2015/06/10 职场文书
运动会报道稿大全
2015/07/23 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书