微信小程序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 相关文章推荐
js简单抽奖代码
Jan 16 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
hammer.js实现图片手势放大效果
Aug 29 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
自己动手封装一个React Native多级联动
Sep 19 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
JavaScript实现网页动态生成表格
Nov 25 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 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截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
javascript如何写热点图
2015/12/08 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
python制作websocket服务器实例分享
2016/11/20 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
环保建议书作文
2014/03/12 职场文书
党员群众路线承诺书
2014/05/20 职场文书
咖啡店创业计划书
2014/08/15 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
银行先进个人总结
2015/02/15 职场文书
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS