微信小程序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 $.ajax入门应用二
Nov 19 Javascript
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
JavaScript简介
Feb 15 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
vue如何引用其他组件(css和js)
Apr 13 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
JS实现纸牌发牌动画
Jan 19 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
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
php中session使用示例
2014/03/29 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
python多线程抓取天涯帖子内容示例
2014/04/03 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
python批量图片处理简单示例
2019/08/06 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
工程造价自荐信
2013/10/09 职场文书
生产部统计员岗位职责
2014/01/05 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
劳资协议书范本
2014/04/23 职场文书
积极向上的团队口号
2014/06/06 职场文书
民族学专业求职信
2014/07/28 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
学校通报表扬范文
2015/05/04 职场文书
合作意向书范本
2019/04/17 职场文书
python非标准时间的转换
2021/07/25 Python
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技