欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-12-10 10:59:46
本文实例讲述了微信小程序使用map组件实现检索(定位位置)周边的poi功能。分享给大家供大家参考,具体如下: 声明 bug: 页面顶部分类【汽车服务、汽车销售等】列表和...

本文实例讲述了微信小程序使用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),改变地图中心坐标。参考:

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
   }]
  })
 }
})

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