微信小程序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 乱码问题
Aug 06 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
js和jquery中获取非行间样式
May 05 jQuery
浅谈Webpack 持久化缓存实践
Mar 22 Javascript
JavaScript模拟实现自由落体效果
Aug 28 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
react+antd 递归实现树状目录操作
Nov 02 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+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
PHP安全防范技巧分享
2011/11/03 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
php压缩文件夹最新版
2018/07/18 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
python正则表达式re之compile函数解析
2017/10/25 Python
python如何生成网页验证码
2018/07/28 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
在Python中COM口的调用方法
2019/07/03 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
python实现堆排序的实例讲解
2020/02/21 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
Tostadora意大利:定制T恤
2019/04/08 全球购物
成功的酒店创业计划书
2013/12/27 职场文书
校园环保建议书
2014/05/14 职场文书
集中采购方案
2014/06/10 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL