微信小程序使用map组件实现检索(定位位置)周边的POI功能示例


Posted in Javascript onJanuary 23, 2019

本文实例讲述了微信小程序使用map组件实现检索(定位位置)周边的POI功能。分享给大家供大家参考,具体如下:

声明

bug: 页面顶部分类【汽车服务、汽车销售等】列表和页脚的详细地址在真机测试是会出现不显示问题?

造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡!

解决办法:将该文本视图采用cover-view,放在map中。

感谢: 感谢Lrj_estranged指出问题!

效果图

微信小程序使用map组件实现检索(定位位置)周边的POI功能示例

实现方法

1. 地图采用微信小程序提供的map组件;

2. 周边的数据坐标点通过高德地图提供的API接口,获取定位位置的周边或者指定位置周边的数据。

WXML

<view class="map_container">
 <map class="map" longitude="{{longitude}}" latitude="{{latitude}}" include-points="{{points}}" markers='{{markers}}'>
   <cover-view class="map-tab-bar">
    <cover-viewclass="map-tab-li {{item.id == status ? 'active' : ''}}" bindtap="getType" data-type="{{item.id}}" wx:key="aroundListId" wx:for="{{aroundList}}">{{item.name}}</cover-view>
   </cover-view>
   <cover-viewclass="map-tab-bar map-foot {{isShow ? '' : 'map-hide'}}">
    <cover-viewclass="map-name">{{name}}</cover-view>
    <cover-viewclass="map-address">{{address}}</cover-view>
   </cover-view>
 </map>
</view>

WXSS

.map_container{
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
}
.map{
 width: 100%;
 height: 100%;
}
.map-tab-bar{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 1000;
 font-size: 0;
 background-color: #fff;
}
.map-hide{display: none;}
.map-foot{
 top: auto;
 bottom: 0;
 padding: 0 10px;
}
.map-name{
 height: 80rpx;
 line-height: 80rpx;
 font-size: 35rpx;
 overflow: hidden;
}
.map-address{
 height: 60rpx;
 line-height: 60rpx;
 font-size: 25rpx;
 overflow: hidden;
}
.map-tab-li{
 display: inline-block;
 width: 25%;
 overflow: hidden;
 height: 70rpx;
 line-height: 70rpx;
 text-align: center;
 font-size: 30rpx;
 color: #333;
}
.map-tab-li.active{color: #fff;background-color: lightgreen;border-radius: 5px;}

JS

var app = getApp();
var amap = app.data.amap;
var key = app.data.key;
Page({
 data: {
  aroundList: [
   {
    name: '汽车服务',
    id: '010000'
   },
   {
    name: '汽车销售',
    id: '020000'
   },
   {
    name: '汽车维修',
    id: '030000'
   },
   {
    name: '摩托车',
    id: '040000'
   },
   {
    name: '餐饮',
    id: '050000'
   },
   {
    name: '购物',
    id: '060000'
   },
   {
    name: '生活',
    id: '070000'
   },
   {
    name: '体育休闲',
    id: '080000'
   },
   {
    name: '医疗保健',
    id: '090000'
   },
   {
    name: '住宿',
    id: '100000'
   },
   {
    name: '风景名胜',
    id: '110000'
   },
   {
    name: '商务住宅',
    id: '120000'
   }
  ],
  status:null,
  latitude: null,
  longitude: null,
  isShow: false,
  markers: [],
  points: [],
  location: '',
  name:'',
  address: ''
 },
 onLoad: function () {
  // 页面加载获取当前定位位置为地图的中心坐标
  var _this = this;
  wx.getLocation({
   success(data) {
    if (data) {
     _this.setData({
      latitude: data.latitude,
      longitude: data.longitude,
      markers:[{
       id:0,
       latitude: data.latitude,
       longitude: data.longitude,
       iconPath: '../../src/images/ding.png',
       width: 32,
       height: 32
      }]
     });
    }
   }
  });
 },
 getType(e) {//获取选择的附近关键词,同时更新状态
  this.setData({ status: e.currentTarget.dataset.type})
  this.getAround(e.currentTarget.dataset.keywords,e.currentTarget.dataset.type);
 },
 getAround(keywords,types) {//通过关键词获取附近的点,只取前十个,同时保证十个点在地图中显示
  var _this = this;
  var myAmap = new amap.AMapWX({ key: key });
  myAmap.getPoiAround({
   iconPath: '../../src/images/blue.png',
   iconPathSelected: '../../src/images/ding.png',
   querykeywords: keywords,
   querytypes: types,
   location: _this.data.location,
   success(data) {
    if (data.markers) {
     var markers = [], points = [];
     for (var value of data.markers) {
      if (value.id > 9) break;
      if(value.id == 0){
       _this.setData({
        name: value.name,
        address: value.address,
        isShow: true
       })
      }
      markers.push({
       id: value.id,
       latitude: value.latitude,
       longitude: value.longitude,
       title: value.name,
       iconPath: value.iconPath,
       width: 32,
       height: 32,
       anchor: { x: .5, y: 1 },
       label: {
        content: value.name,
        color: 'green',
        fontSize: 12,
        borderRadius: 5,
        bgColor: '#fff',
        padding: 3,
        x: 0,
        y: -50,
        textAlign: 'center'
       }
      });
      points.push({
       latitude: value.latitude,
       longitude: value.longitude
      })
     }
     _this.setData({
      markers: markers,
      points: points
     })
    }
   },
   fail: function (info) {
    wx.showToast({title: info})
   }
  })
 }
});

总结

1. 由于是移动端,所以人为限制只显示了9条周边数据,防止重叠部分太多。

2. 添加指定位置的周边的方法—-添加一个input,将给的关键字进行搜索,然后返回坐标,改变地图中心坐标。

3. 改变中心坐标还有采用微信小程序自己的API(wx.chooseLocation),改变地图中心坐标。参考:微信小程序实现map路线规划

4. 高德地图提供API和微信小程序提供API的优劣:①、目前高德提供的API返回数据很快,最少目前比微信小程序自己的快很多;②、缺点也很明显就是由于是外部提供的,所以需要进行对应配置,麻烦;③、微信小程序提供的API优势就是属于本身,不用额外配置,如果以后优化了,更好。

实例:

用高德地图提供的 getInputtips 接口,搜索关键字和城市,返回的坐标,然后改变地图中心坐标。

// 页面加载以输入地址为地图的中心坐标
// 假如输入的是:成都 欧尚庭院
myAmap.getInputtips({
 keywords: '欧尚庭院',
 city: '成都',
 success(res) {
  var tip = res.tips[0];
  var lo = tip.location.split(',')[0];
  var la = tip.location.split(',')[1];
  _this.setData({
   latitude: la,
   longitude: lo,
   location: tip.location,
   markers: [{
    id: 0,
    latitude: la,
    longitude: lo,
    iconPath: '../../src/images/ding.png',
    width: 32,
    height: 32
   }]
  })
 }
})

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
May 03 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
Vue 样式绑定的实现方法
Jan 15 Javascript
vue.js的简单自动求和计算实例
Nov 08 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
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 #Javascript
You might like
自定义PHP分页函数
2006/10/09 PHP
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
php文件下载处理方法分析
2015/04/22 PHP
php的socket编程详解
2016/11/20 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
Node.js异步I/O学习笔记
2014/11/04 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
python文件操作整理汇总
2014/10/21 Python
Python新手学习装饰器
2020/06/04 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
学前教育专业毕业生自荐信
2013/10/03 职场文书
2014学雷锋活动心得体会
2014/03/10 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
化工实习心得体会
2014/09/09 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
施工安全协议书
2016/03/22 职场文书
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL