浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。

文档全面上新

更科技的视觉体验,更高效的页面结构,快前往体验吧!

体验新版
第1行: 第1行:
 
{{wxjsapi-sidebar}}<div class="bread-crumbs">您当前位置: [[wxjsapi|微信小程序JS API]] > [[wxjsapi/guide/key|开发指南]] > 获取地图数据 > POI检索</div><div class="h1-title">POI检索</div><div id="update-time1">更新时间:2019年05月22日</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>简介</span></div></div></div><div class="serve-explain-text">该查找并展示定位地点周边的POI信息,很快知道“我周围有什么”。默认返回生活服务、美食、酒店三种类型的POI。
 
{{wxjsapi-sidebar}}<div class="bread-crumbs">您当前位置: [[wxjsapi|微信小程序JS API]] > [[wxjsapi/guide/key|开发指南]] > 获取地图数据 > POI检索</div><div class="h1-title">POI检索</div><div id="update-time1">更新时间:2019年05月22日</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>简介</span></div></div></div><div class="serve-explain-text">该查找并展示定位地点周边的POI信息,很快知道“我周围有什么”。默认返回生活服务、美食、酒店三种类型的POI。
检索返回的结果包含marker数组数据和完整数据两项。marker数组数据符合小程序marker规范,可以直接用于小程序map中;完整数据包含了百度POI检索接口返回的所有详尽的数据,方便开发者进行自定义开发。
 
</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>实现方法</span></div></div></div><div class="devguide"><div class="leftborderbg" style="height:5000px;"></div><div class="devguideorder"><span>1</span><div>打开快速创建的微信小程序 pages/index/index.js 文件,用下面的代码完全替换原代码</div></div><div class="devguidecenter">
 
在以下的代码中,首先引用百度地图微信小程序JavaScript API 模块,然后在页面的onLoad中声明BMapWX对象,最后调用BMapWX.search方法进行POI检索。
 
<pre class="prettyprint codestyle">// 引用百度地图微信小程序JSAPI模块
 
var bmap = require('../../libs/bmap-wx.js');
 
var wxMarkerData = [];
 
Page({
 
&nbsp; &nbsp; data: {
 
&nbsp; &nbsp; &nbsp; &nbsp; markers: [],
 
&nbsp; &nbsp; &nbsp; &nbsp; latitude: '',
 
&nbsp; &nbsp; &nbsp; &nbsp; longitude: '',
 
&nbsp; &nbsp; &nbsp; &nbsp; placeData: {}
 
&nbsp; &nbsp; },
 
&nbsp; &nbsp; makertap: function(e) {
 
&nbsp; &nbsp; &nbsp; &nbsp; var that = this;
 
&nbsp; &nbsp; &nbsp; &nbsp; var id = e.markerId;
 
&nbsp; &nbsp; &nbsp; &nbsp; that.showSearchInfo(wxMarkerData, id);
 
&nbsp; &nbsp; &nbsp; &nbsp; that.changeMarkerColor(wxMarkerData, id);
 
&nbsp; &nbsp; },
 
&nbsp; &nbsp; onLoad: function() {
 
&nbsp; &nbsp; &nbsp; &nbsp; var that = this;
 
&nbsp; &nbsp; &nbsp; &nbsp; // 新建百度地图对象
 
&nbsp; &nbsp; &nbsp; &nbsp; var BMap = new bmap.BMapWX({
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ak: '您的ak'
 
&nbsp; &nbsp; &nbsp; &nbsp; });
 
&nbsp; &nbsp; &nbsp; &nbsp; var fail = function(data) {
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(data)
 
&nbsp; &nbsp; &nbsp; &nbsp; };
 
&nbsp; &nbsp; &nbsp; &nbsp; var success = function(data) {
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wxMarkerData = data.wxMarkerData;
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; that.setData({
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; markers: wxMarkerData
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; that.setData({
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; latitude: wxMarkerData[0].latitude
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; that.setData({
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; longitude: wxMarkerData[0].longitude
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });
 
&nbsp; &nbsp; &nbsp; &nbsp; }
 
&nbsp; &nbsp; &nbsp; &nbsp;// 发起POI检索请求
 
&nbsp; &nbsp; &nbsp; &nbsp; BMap.search({
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "query": '酒店',
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fail: fail,
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: success,
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 此处需要在相应路径放置图片文件
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iconPath: '../../img/marker_red.png',
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 此处需要在相应路径放置图片文件
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iconTapPath: '../../img/marker_red.png'
 
&nbsp; &nbsp; &nbsp; &nbsp; });
 
&nbsp; &nbsp; },
 
&nbsp; &nbsp; showSearchInfo: function(data, i) {
 
&nbsp; &nbsp; &nbsp; &nbsp; var that = this;
 
&nbsp; &nbsp; &nbsp; &nbsp; that.setData({
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeData: {
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: '名称:' + data[i].title + '\n',
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; address: '地址:' + data[i].address + '\n',
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; telephone: '电话:' + data[i].telephone
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
 
&nbsp; &nbsp; &nbsp; &nbsp; });
 
&nbsp; &nbsp; },
 
&nbsp; &nbsp; changeMarkerColor: function(data, i) {
 
&nbsp; &nbsp; &nbsp; &nbsp; var that = this;
 
&nbsp; &nbsp; &nbsp; &nbsp; var markers = [];
 
&nbsp; &nbsp; &nbsp; &nbsp; for (var j = 0; j < data.length; j++) {
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (j == i) {
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 此处需要在相应路径放置图片文件
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data[j].iconPath = "../../img/marker_yellow.png";
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 此处需要在相应路径放置图片文件
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data[j].iconPath = "../../img/marker_red.png";
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; markers[j](data[j]);
 
&nbsp; &nbsp; &nbsp; &nbsp; }
 
&nbsp; &nbsp; &nbsp; &nbsp; that.setData({
 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; markers: markers
 
&nbsp; &nbsp; &nbsp; &nbsp; });
 
&nbsp; &nbsp; }
 
})
 
</pre>
 
</div><div class="devguideorder"><span>2</span>
 
为能够正常展示地图和检索结果,请打开 pages/index/index.wxml 文件,用下面的代码完全替换原代码
 
</div><div class="devguidecenter"><pre class="prettyprint codestyle"><view class="map_container">
 
&nbsp; <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map>
 
</view>
 
<view class="place_info">
 
&nbsp; <text>{{placeData.title}}</text>
 
&nbsp; <text>{{placeData.address}}</text>
 
&nbsp; <text>{{placeData.telephone}}</text>
 
</view>
 
</pre>
 
</div><div class="devguideorder"><span>3</span>拷贝样式代码到 pages/index/index.wxss文件</div><div class="devguidecenter"><pre class="prettyprint codestyle">.map_container{
 
&nbsp; &nbsp; height: 300px;
 
&nbsp; &nbsp; width: 100%;
 
}
 
 
 
.map {
 
&nbsp; &nbsp; height: 100%;
 
&nbsp; &nbsp; width: 100%;
 
}
 
</pre>
 
</div><div class="devguideorder"><span>4</span>最后保存修改,即可看到示例效果</div><div class="devguidecenter">本示例在页面加载完成后按照当前定位点,对周边的酒店进行了检索,并将检索的结果通过marker标识到地图中。点击marker可以查看当前POI点的详细信息。
 
http://mapopen-pub-jsapi.bj.bcebos.com/img/place.PNG
 
</div></div>
 
<!--
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  = POI检索 =
 
 
 
  查找并展示定位地点周边的POI信息,很快知道“我周围有什么”。默认返回生活服务、美食、酒店三种类型的POI。
 
 
 
 
   检索返回的结果包含marker数组数据和完整数据两项。marker数组数据符合小程序marker规范,可以直接用于小程序map中;完整数据包含了百度POI检索接口返回的所有详尽的数据,方便开发者进行自定义开发。
 
   检索返回的结果包含marker数组数据和完整数据两项。marker数组数据符合小程序marker规范,可以直接用于小程序map中;完整数据包含了百度POI检索接口返回的所有详尽的数据,方便开发者进行自定义开发。
    
+
   </div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>实现方法</span></div></div></div><div class="devguide"><div class="leftborderbg" style="height:5000px;"></div><div class="devguideorder"><span>1</span><div>打开快速创建的微信小程序 pages/index/index.js 文件,用下面的代码完全替换原代码</div></div><div class="devguidecenter">
  = 实现方法 =
+
 
+
  1、打开快速创建的微信小程序 pages/index/index.js 文件,用下面的代码完全替换原代码。
+
 
+
 
   在以下的代码中,首先引用百度地图微信小程序JavaScript API 模块,然后在页面的onLoad中声明BMapWX对象,最后调用BMapWX.search方法进行POI检索。
 
   在以下的代码中,首先引用百度地图微信小程序JavaScript API 模块,然后在页面的onLoad中声明BMapWX对象,最后调用BMapWX.search方法进行POI检索。
 
+
   <pre class="prettyprint codestyle" style="overflow-y: auto;">// 引用百度地图微信小程序JSAPI模块  
 
+
  var bmap = require('../../libs/bmap-wx.js');  
   <span _fck_mw_customtag="true" _fck_mw_tagname="syntaxhighlight" _fck_mw_tagtype="t" lang="null" _fck_mw_tagattributes="lang" class="fck_mw_syntaxhighlight">fckLRfckLR// 引用百度地图微信小程序JSAPI模块 fckLRvar bmap = require('../../libs/bmap-wx.js'); fckLRvar wxMarkerData = []; fckLRPage({ fckLR    data: { fckLR        markers: [], fckLR        latitude: '', fckLR        longitude: '', fckLR        placeData: {} fckLR    }, fckLR    makertap: function(e) { fckLR        var that = this; fckLR        var id = e.markerId; fckLR        that.showSearchInfo(wxMarkerData, id); fckLR        that.changeMarkerColor(wxMarkerData, id); fckLR    }, fckLR    onLoad: function() { fckLR        var that = this; fckLR        // 新建百度地图对象 fckLR        var BMap = new bmap.BMapWX({ fckLR            ak: '您的ak' fckLR        }); fckLR        var fail = function(data) { fckLR            console.log(data) fckLR        }; fckLR        var success = function(data) { fckLR            wxMarkerData = data.wxMarkerData; fckLR            that.setData({ fckLR                markers: wxMarkerData fckLR            }); fckLR            that.setData({ fckLR                latitude: wxMarkerData[0].latitude fckLR            }); fckLR            that.setData({ fckLR                longitude: wxMarkerData[0].longitude fckLR            }); fckLR        } fckLR       // 发起POI检索请求 fckLR        BMap.search({ fckLR            "query": '酒店', fckLR            fail: fail, fckLR            success: success, fckLR            // 此处需要在相应路径放置图片文件 fckLR            iconPath: '../../img/marker_red.png', fckLR            // 此处需要在相应路径放置图片文件 fckLR            iconTapPath: '../../img/marker_red.png' fckLR        }); fckLR    }, fckLR    showSearchInfo: function(data, i) { fckLR        var that = this; fckLR        that.setData({ fckLR            placeData: { fckLR                title: '名称:' + data[i].title + '\n', fckLR                address: '地址:' + data[i].address + '\n', fckLR                telephone: '电话:' + data[i].telephone fckLR            } fckLR        }); fckLR    }, fckLR    changeMarkerColor: function(data, i) { fckLR        var that = this; fckLR        var markers = []; fckLR        for (var j = 0; j &lt; data.length; j++) { fckLR            if (j == i) { fckLR                // 此处需要在相应路径放置图片文件 fckLR                data[j].iconPath = "../../img/marker_yellow.png"; fckLR            } else { fckLR                // 此处需要在相应路径放置图片文件 fckLR                data[j].iconPath = "../../img/marker_red.png"; fckLR            } fckLR            markers[j](data[j]); fckLR        } fckLR        that.setData({ fckLR            markers: markers fckLR        }); fckLR    } fckLR}) fckLRfckLR fckLR</span>
+
  var wxMarkerData = [];  
    
+
  Page({  
   2、为能够正常展示地图和检索结果,请打开 pages/index/index.wxml 文件,用下面的代码完全替换原代码。
+
  &nbsp; &nbsp; data: {  
 
+
  &nbsp; &nbsp; &nbsp; &nbsp; markers: [],  
 
+
  &nbsp; &nbsp; &nbsp; &nbsp; latitude: '',  
   <span _fck_mw_customtag="true" _fck_mw_tagname="syntaxhighlight" _fck_mw_tagtype="t" lang="null" _fck_mw_tagattributes="lang" class="fck_mw_syntaxhighlight">fckLRfckLR&lt;view class="map_container"&gt; fckLR  &lt;map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"&gt;&lt;/map&gt; fckLR&lt;/view&gt; fckLR&lt;view class="place_info"&gt; fckLR  &lt;text&gt;{{placeData.title}}&lt;/text&gt; fckLR  &lt;text&gt;{{placeData.address}}&lt;/text&gt; fckLR  &lt;text&gt;{{placeData.telephone}}&lt;/text&gt; fckLR&lt;/view&gt; fckLR fckLR</span>
+
  &nbsp; &nbsp; &nbsp; &nbsp; longitude: '',  
    
+
  &nbsp; &nbsp; &nbsp; &nbsp; placeData: {}  
  3、拷贝样式代码到 pages/index/index.wxss文件。
+
  &nbsp; &nbsp; },  
 
+
  &nbsp; &nbsp; makertap: function(e) {  
 
+
  &nbsp; &nbsp; &nbsp; &nbsp; var that = this;  
  <span _fck_mw_customtag="true" _fck_mw_tagname="syntaxhighlight" _fck_mw_tagtype="t" lang="null" _fck_mw_tagattributes="lang" class="fck_mw_syntaxhighlight">fckLRfckLR.map_container{ fckLR    height: 300px; fckLR    width: 100%; fckLR} fckLRfckLR.map { fckLR    height: 100%; fckLR    width: 100%; fckLR} fckLR fckLR</span>
+
  &nbsp; &nbsp; &nbsp; &nbsp; var id = e.markerId;  
    
+
  &nbsp; &nbsp; &nbsp; &nbsp; that.showSearchInfo(wxMarkerData, id);  
  4、最后保存修改,即可看到示例效果。本示例在页面加载完成后按照当前定位点,对周边的酒店进行了检索,并将检索的结果通过marker标识到地图中。点击marker可以查看当前POI点的详细信息。
+
  &nbsp; &nbsp; &nbsp; &nbsp; that.changeMarkerColor(wxMarkerData, id);  
 
+
  &nbsp; &nbsp; },  
 +
  &nbsp; &nbsp; onLoad: function() {  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; var that = this;  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; // 新建百度地图对象  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; var BMap = new bmap.BMapWX({  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ak: '您的ak'  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; });  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; var fail = function(data) {  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(data)  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; };  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; var success = function(data) {  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wxMarkerData = data.wxMarkerData;  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; that.setData({  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; markers: wxMarkerData  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; that.setData({  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; latitude: wxMarkerData[0].latitude  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; that.setData({  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; longitude: wxMarkerData[0].longitude  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; }  
 +
  &nbsp; &nbsp; &nbsp; &nbsp;// 发起POI检索请求  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; BMap.search({  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "query": '酒店',  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fail: fail,  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: success,  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 此处需要在相应路径放置图片文件  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iconPath: '../../img/marker_red.png',  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 此处需要在相应路径放置图片文件  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iconTapPath: '../../img/marker_red.png'  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; });  
 +
  &nbsp; &nbsp; },  
 +
  &nbsp; &nbsp; showSearchInfo: function(data, i) {  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; var that = this;  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; that.setData({  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeData: {  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: '名称:' + data[i].title + '\n',  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; address: '地址:' + data[i].address + '\n',  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; telephone: '电话:' + data[i].telephone  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; });  
 +
  &nbsp; &nbsp; },  
 +
  &nbsp; &nbsp; changeMarkerColor: function(data, i) {  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; var that = this;  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; var markers = [];  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; for (var j = 0; j < data.length; j++) {  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (j == i) {  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 此处需要在相应路径放置图片文件  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data[j].iconPath = "../../img/marker_yellow.png";  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 此处需要在相应路径放置图片文件  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data[j].iconPath = "../../img/marker_red.png";  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; markers[j](data[j]);  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; }  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; that.setData({  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; markers: markers  
 +
  &nbsp; &nbsp; &nbsp; &nbsp; });  
 +
  &nbsp; &nbsp; }  
 +
  })
 +
  </pre>
 +
   </div><div class="devguideorder"><span>2</span>
 +
   为能够正常展示地图和检索结果,请打开 pages/index/index.wxml 文件,用下面的代码完全替换原代码
 +
   </div><div class="devguidecenter"><pre class="prettyprint codestyle"><view class="map_container">
 +
  &nbsp; <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map>
 +
  </view>
 +
  <view class="place_info">
 +
  &nbsp; <text>{{placeData.title}}</text>
 +
  &nbsp; <text>{{placeData.address}}</text>
 +
  &nbsp; <text>{{placeData.telephone}}</text>
 +
  </view>
 +
  </pre>
 +
   </div><div class="devguideorder"><span>3</span>拷贝样式代码到 pages/index/index.wxss文件</div><div class="devguidecenter"><pre class="prettyprint codestyle">.map_container{  
 +
  &nbsp; &nbsp; height: 300px;  
 +
  &nbsp; &nbsp; width: 100%;  
 +
  }  
 +
   
 +
  .map {  
 +
  &nbsp; &nbsp; height: 100%;  
 +
  &nbsp; &nbsp; width: 100%;  
 +
  }  
 +
  </pre>
 +
   </div><div class="devguideorder"><span>4</span>最后保存修改,即可看到示例效果</div><div class="devguidecenter">本示例在页面加载完成后按照当前定位点,对周边的酒店进行了检索,并将检索的结果通过marker标识到地图中。点击marker可以查看当前POI点的详细信息。
 
   http://mapopen-pub-jsapi.bj.bcebos.com/img/place.PNG
 
   http://mapopen-pub-jsapi.bj.bcebos.com/img/place.PNG
    
+
   </div></div>
    
+
   <!--
 
+
   
 
+
   
 
+
   
  -->
+
   
 +
   
 +
   
 +
   
 +
   
 +
    = POI检索 =
 +
   
 +
    查找并展示定位地点周边的POI信息,很快知道“我周围有什么”。默认返回生活服务、美食、酒店三种类型的POI。
 +
   
 +
    检索返回的结果包含marker数组数据和完整数据两项。marker数组数据符合小程序marker规范,可以直接用于小程序map中;完整数据包含了百度POI检索接口返回的所有详尽的数据,方便开发者进行自定义开发。
 +
   
 +
    = 实现方法 =
 +
   
 +
    1、打开快速创建的微信小程序 pages/index/index.js 文件,用下面的代码完全替换原代码。
 +
   
 +
    在以下的代码中,首先引用百度地图微信小程序JavaScript API 模块,然后在页面的onLoad中声明BMapWX对象,最后调用BMapWX.search方法进行POI检索。
 +
   
 +
   
 +
    <span _fck_mw_customtag="true" _fck_mw_tagname="syntaxhighlight" _fck_mw_tagtype="t" lang="null" _fck_mw_tagattributes="lang" class="fck_mw_syntaxhighlight">fckLRfckLR// 引用百度地图微信小程序JSAPI模块 fckLRvar bmap = require('../../libs/bmap-wx.js'); fckLRvar wxMarkerData = []; fckLRPage({ fckLR    data: { fckLR        markers: [], fckLR        latitude: '', fckLR        longitude: '', fckLR        placeData: {} fckLR    }, fckLR    makertap: function(e) { fckLR        var that = this; fckLR        var id = e.markerId; fckLR        that.showSearchInfo(wxMarkerData, id); fckLR        that.changeMarkerColor(wxMarkerData, id); fckLR    }, fckLR    onLoad: function() { fckLR        var that = this; fckLR        // 新建百度地图对象 fckLR        var BMap = new bmap.BMapWX({ fckLR            ak: '您的ak' fckLR        }); fckLR        var fail = function(data) { fckLR            console.log(data) fckLR        }; fckLR        var success = function(data) { fckLR            wxMarkerData = data.wxMarkerData; fckLR            that.setData({ fckLR                markers: wxMarkerData fckLR            }); fckLR            that.setData({ fckLR                latitude: wxMarkerData[0].latitude fckLR            }); fckLR            that.setData({ fckLR                longitude: wxMarkerData[0].longitude fckLR            }); fckLR        } fckLR       // 发起POI检索请求 fckLR        BMap.search({ fckLR            "query": '酒店', fckLR            fail: fail, fckLR            success: success, fckLR            // 此处需要在相应路径放置图片文件 fckLR            iconPath: '../../img/marker_red.png', fckLR            // 此处需要在相应路径放置图片文件 fckLR            iconTapPath: '../../img/marker_red.png' fckLR        }); fckLR    }, fckLR    showSearchInfo: function(data, i) { fckLR        var that = this; fckLR        that.setData({ fckLR            placeData: { fckLR                title: '名称:' + data[i].title + '\n', fckLR                address: '地址:' + data[i].address + '\n', fckLR                telephone: '电话:' + data[i].telephone fckLR            } fckLR        }); fckLR    }, fckLR    changeMarkerColor: function(data, i) { fckLR        var that = this; fckLR        var markers = []; fckLR        for (var j = 0; j &lt; data.length; j++) { fckLR            if (j == i) { fckLR                // 此处需要在相应路径放置图片文件 fckLR                data[j].iconPath = "../../img/marker_yellow.png"; fckLR            } else { fckLR                // 此处需要在相应路径放置图片文件 fckLR                data[j].iconPath = "../../img/marker_red.png"; fckLR            } fckLR            markers[j](data[j]); fckLR        } fckLR        that.setData({ fckLR            markers: markers fckLR        }); fckLR    } fckLR}) fckLRfckLR fckLR</span>
 +
   
 +
    2、为能够正常展示地图和检索结果,请打开 pages/index/index.wxml 文件,用下面的代码完全替换原代码。
 +
   
 +
   
 +
    <span _fck_mw_customtag="true" _fck_mw_tagname="syntaxhighlight" _fck_mw_tagtype="t" lang="null" _fck_mw_tagattributes="lang" class="fck_mw_syntaxhighlight">fckLRfckLR&lt;view class="map_container"&gt; fckLR  &lt;map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"&gt;&lt;/map&gt; fckLR&lt;/view&gt; fckLR&lt;view class="place_info"&gt; fckLR  &lt;text&gt;{{placeData.title}}&lt;/text&gt; fckLR  &lt;text&gt;{{placeData.address}}&lt;/text&gt; fckLR  &lt;text&gt;{{placeData.telephone}}&lt;/text&gt; fckLR&lt;/view&gt; fckLR fckLR</span>
 +
   
 +
    3、拷贝样式代码到 pages/index/index.wxss文件。
 +
   
 +
   
 +
    <span _fck_mw_customtag="true" _fck_mw_tagname="syntaxhighlight" _fck_mw_tagtype="t" lang="null" _fck_mw_tagattributes="lang" class="fck_mw_syntaxhighlight">fckLRfckLR.map_container{ fckLR    height: 300px; fckLR    width: 100%; fckLR} fckLRfckLR.map { fckLR    height: 100%; fckLR    width: 100%; fckLR} fckLR fckLR</span>
 +
   
 +
    4、最后保存修改,即可看到示例效果。本示例在页面加载完成后按照当前定位点,对周边的酒店进行了检索,并将检索的结果通过marker标识到地图中。点击marker可以查看当前POI点的详细信息。
 +
   
 +
    http://mapopen-pub-jsapi.bj.bcebos.com/img/place.PNG
 +
   
 +
   
 +
   
 +
   
 +
   
 +
    -->

2023年10月8日 (日) 17:41的版本

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点的详细信息。
 place.PNG
  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消