微信小程序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 相关文章推荐
Jquery选择器 $实现原理
Dec 02 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
JS时间选择器 兼容IE6,7,8,9
Jun 26 Javascript
React创建组件的三种方式及其区别
Jan 12 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
vue实现全选、反选功能
Nov 17 Javascript
JS中的BOM应用
Feb 02 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
微信小程序实现搜索历史功能
Mar 26 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
PHP 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
php实现的简单检验登陆类
2015/06/18 PHP
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
jQuery基础知识小结
2014/12/22 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
python执行使用shell命令方法分享
2017/11/08 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
python使用Matplotlib画条形图
2020/03/25 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
python适合人工智能的理由和优势
2019/06/28 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
python os.listdir()乱码解决方案
2021/01/31 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
学年自我鉴定范文
2013/10/01 职场文书
就业自我评价
2014/02/04 职场文书
质量管理标语
2014/06/12 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
小学生手册家长意见
2015/06/03 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
欠条范文
2015/07/03 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技