微信小程序使用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 相关文章推荐
javascript forEach通用循环遍历方法
Oct 11 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
html dom节点操作(获取/修改/添加或删除)
Jan 23 Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
JavaScript验证知识整理
Mar 24 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
May 07 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 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&amp;mysql(一)
2006/10/09 PHP
php 如何获取数组第一个值
2013/08/06 PHP
php无限遍历目录示例
2014/02/21 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
php头像上传预览实例代码
2017/05/02 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
微信小程序实现拼图小游戏
2020/10/22 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
python简单分割文件的方法
2015/07/30 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
有关Python的22个编程技巧
2018/08/29 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
5款实用的python 工具推荐
2020/10/13 Python
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
化学工程专业求职信
2014/08/10 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
街道社区活动报告
2015/02/05 职场文书
离职证明格式样本
2015/06/12 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题