微信小程序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,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
javascript中String类的subString()方法和slice()方法
May 24 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
js加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
Active控件问题小结(附解决办法)
Jun 09 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
Dec 01 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 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
PHPMailer 中文使用说明小结
2010/01/22 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
php实现设计模式中的单例模式详解
2014/10/11 PHP
php实现字符串翻转的方法
2015/03/27 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
生产现场工艺工程师岗位职责
2013/11/28 职场文书
企业演讲稿范文
2013/12/28 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
三年级学生期末评语
2014/12/26 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
建党伟业观后感
2015/06/01 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
php png失真的原因及解决办法
2021/10/24 PHP
Vue.Draggable实现交换位置
2022/04/07 Vue.js
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL