微信小程序JavaScript API - POI检索

您当前位置：微信小程序JS API > 开发指南 > 获取地图数据 > POI检索

POI检索

更新时间：2019年05月22日

简介

该查找并展示定位地点周边的POI信息，很快知道“我周围有什么”。默认返回生活服务、美食、酒店三种类型的POI。

 检索返回的结果包含marker数组数据和完整数据两项。marker数组数据符合小程序marker规范，可以直接用于小程序map中；完整数据包含了百度POI检索接口返回的所有详尽的数据，方便开发者进行自定义开发。

实现方法

1

打开快速创建的微信小程序 pages/index/index.js 文件，用下面的代码完全替换原代码

 在以下的代码中，首先引用百度地图微信小程序JavaScript API 模块，然后在页面的onLoad中声明BMapWX对象，最后调用BMapWX.search方法进行POI检索。

// 引用百度地图微信小程序JSAPI模块 
  var bmap = require('../../libs/bmap-wx.js'); 
  var wxMarkerData = []; 
  Page({ 
      data: { 
          markers: [], 
          latitude: '', 
          longitude: '', 
          placeData: {} 
      }, 
      makertap: function(e) { 
          var that = this; 
          var id = e.markerId; 
          that.showSearchInfo(wxMarkerData, id); 
          that.changeMarkerColor(wxMarkerData, id); 
      }, 
      onLoad: function() { 
          var that = this; 
          // 新建百度地图对象 
          var BMap = new bmap.BMapWX({ 
              ak: '您的ak' 
          }); 
          var fail = function(data) { 
              console.log(data) 
          }; 
          var success = function(data) { 
              wxMarkerData = data.wxMarkerData; 
              that.setData({ 
                  markers: wxMarkerData 
              }); 
              that.setData({ 
                  latitude: wxMarkerData[0].latitude 
              }); 
              that.setData({ 
                  longitude: wxMarkerData[0].longitude 
              }); 
          } 
         // 发起POI检索请求 
          BMap.search({ 
              "query": '酒店', 
              fail: fail, 
              success: success, 
              // 此处需要在相应路径放置图片文件 
              iconPath: '../../img/marker_red.png', 
              // 此处需要在相应路径放置图片文件 
              iconTapPath: '../../img/marker_red.png' 
          }); 
      }, 
      showSearchInfo: function(data, i) { 
          var that = this; 
          that.setData({ 
              placeData: { 
                  title: '名称：' + data[i].title + '\n', 
                  address: '地址：' + data[i].address + '\n', 
                  telephone: '电话：' + data[i].telephone 
              } 
          }); 
      }, 
      changeMarkerColor: function(data, i) { 
          var that = this; 
          var markers = []; 
          for (var j = 0; j < data.length; j++) { 
              if (j == i) { 
                  // 此处需要在相应路径放置图片文件 
                  data[j].iconPath = "../../img/marker_yellow.png"; 
              } else { 
                  // 此处需要在相应路径放置图片文件 
                  data[j].iconPath = "../../img/marker_red.png"; 
              } 
              markers[j](data[j]); 
          } 
          that.setData({ 
              markers: markers 
          }); 
      } 
  })

2

 为能够正常展示地图和检索结果，请打开 pages/index/index.wxml 文件，用下面的代码完全替换原代码

<view class="map_container"> 
    <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map> 
  </view> 
  <view class="place_info"> 
    <text>{{placeData.title}}</text> 
    <text>{{placeData.address}}</text> 
    <text>{{placeData.telephone}}</text> 
  </view>

3拷贝样式代码到 pages/index/index.wxss文件

.map_container{ 
      height: 300px; 
      width: 100%; 
  } 
    
  .map { 
      height: 100%; 
      width: 100%; 
  }

4最后保存修改，即可看到示例效果

本示例在页面加载完成后按照当前定位点，对周边的酒店进行了检索，并将检索的结果通过marker标识到地图中。点击marker可以查看当前POI点的详细信息。

文档全面上新