微信小程序使用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处理VBArray的函数使用说明
May 11 Javascript
javascript 命名空间以提高代码重用性
Nov 13 Javascript
javascript 获取页面的高度及滚动条的位置的代码
May 06 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
layui table 参数设置方法
Aug 14 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 Javascript
Vue+Element-U实现分页显示效果
Nov 15 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 函数执行效率的小比较
2010/10/17 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
Angular工具方法学习
2016/12/26 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
python实现五子棋程序
2020/04/24 Python
django下创建多个app并设置urls方法
2020/08/02 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
理财投资建议书
2014/03/12 职场文书
领导接待方案
2014/03/13 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
初中信息技术教学计划
2015/01/22 职场文书
横空出世观后感
2015/06/09 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
MySQL索引失效的典型案例
2021/06/05 MySQL
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python
Python实现视频自动打码的示例代码
2022/04/08 Python