微信小程序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 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
vue实现密码显示隐藏切换功能
Feb 23 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 Javascript
JavaScript实现随机点名器
Mar 25 Javascript
JavaScript十大取整方法实例教程
Dec 03 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文件操作简单介绍及函数汇总
2020/12/11 PHP
超简单的jquery的AJAX用法
2010/05/10 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
c++生成dll使用python调用dll的方法
2014/01/20 Python
python实现端口转发器的方法
2015/03/13 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
python中setuptools的作用是什么
2020/06/19 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
马来西亚网上购物:Youbeli
2018/03/30 全球购物
加工操作管理制度
2014/01/19 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书