微信小程序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中的集合及效率
Jan 08 Javascript
Date对象格式化函数代码
Jul 17 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
jquery.cookie用法详细解析
Dec 18 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
JavaScript实现构造json数组的方法分析
Aug 17 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 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根据操作系统转换文件名大小写的方法
2014/02/24 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
JavaScript 序列化对象实现代码
2009/12/18 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
javascript中clone对象详解
2014/12/03 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
Python3爬楼梯算法示例
2019/03/04 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
jupyter notebook清除输出方式
2020/04/10 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
英国在线药房:Express Chemist
2019/03/28 全球购物
公司庆典邀请函范文
2014/01/13 职场文书
县优秀教师事迹材料
2014/01/31 职场文书
《满井游记》教学反思
2014/02/26 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
大学毕业生自我评价
2015/03/02 职场文书
保险内勤岗位职责
2015/04/13 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
辞职信怎么写?
2019/05/21 职场文书
Python基本知识点总结
2022/04/07 Python