微信小程序使用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页面上使用动态时间具体实现
Mar 18 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 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
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
各种快递查询--Api接口
2016/04/26 PHP
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
vue实现全选和反选功能
2017/08/31 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
python实现的各种排序算法代码
2013/03/04 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
金融专业应届生求职信
2013/11/02 职场文书
服务员自我评价
2014/01/25 职场文书
2014端午节活动策划方案
2014/01/27 职场文书
网络宣传方案
2014/03/15 职场文书
企业年会主持词
2014/03/27 职场文书
保护环境倡议书范文
2014/05/13 职场文书
微电影大赛策划方案
2014/06/05 职场文书
工作求职自荐信
2014/06/13 职场文书
社区植树节活动总结
2015/02/06 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
特种设备安全管理制度
2015/08/06 职场文书
九年级英语教学反思
2016/02/15 职场文书
springboot实现string转json json里面带数组
2022/06/16 Java/Android