百度地图－非常实用的搜索自定义-白红宇

百度地图－非常实用的搜索自定义

阅读量：2431 次

发布时间：2019-05-10

本文共 2076 字，大约阅读时间需要 6 分钟。

这几天做了个关于百度地图的小项目，之前用的google地图，百度地图的api有些地方设计的还是比较诡异的，在这里说一下其中的两个小地方。

第一个是使用LocalSearch时，要获取显示在地图上的所有Marker，百度地图提供了这样一个函数

这个函数在所有Marker被添加后调用，要取得这些Marker，在这里面进行修改，比如设置监听器是个不错的选择，描述里说明可以通过LocalResultPoi对象的marker属性，不过我们查阅API会发现，LocalResultPoi对象根本就没有marker这个属性，其实确实是没有，但在这里也是可以直接用的：

1 local.setMarkersSetCallback(function(pois){
  2     for(var i=0;i

在这里我用一个markerArr数组存下了所有的Marker，并且为每个Marker添加了infowindowopen事件。

第二个问题困扰了我一下午，也没有用我最初的想法解决，我想自定义结果面板，但是仍然想在点击一个地点后，地图上打开对应地点的信息窗，我的最初构想是点击文字后，模拟触发对应Marker的click事件，结果让我愤慨的是，百度地图好像并没有提供模拟触发事件的接口，在网上搜到了一个封装的EventWapper对象，但是也没有起作用，最后无奈之下，只能是利用数据接口自己来实现这个信息窗了：

1 var local = new BMap.LocalSearch(map, {   2     renderOptions: {   3         map: map,   4        autoViewport: true,   5        selectFirstResult: false   6     },  7     onSearchComplete: function(results){  8         //可以得到搜索结果且搜索结果不为空  9         if(local.getStatus() == BMAP_STATUS_SUCCESS){
  10         var html=""; 11         //遍历结果第一页的点，自定义结果面板 12         for (var i = 0; i < results.getCurrentNumPois(); i++){  13             var poi = results.getPoi(i); 14                 //下面根据LocalResultPoi对象的值拼html代码，此处略 15                 title[i] = poi.title; 16                 if(poi.address) 17                     address[i] = poi.address; 18                 if(poi.phoneNumber) 19                     telephone[i] = poi.phoneNumber; 20             } 21                         22             //重新遍历第一页所有点，对结果面板中的每一条记录添加click事件 23             for (var i = 0; i < results.getCurrentNumPois(); i++){  24                 $("#poi" + i).click(function(){
  25                     //这里用前面title、address、telephone三个数组中存放的值来拼信息窗里的html代码，存在变量content中，然后： 26                     var info = new BMap.InfoWindow(content); 27                     //利用在第一个问题中的markerArr数组设置触发函数，但注意数组的索引值不能用i，因为函数运行时i已不存在，因此在构造结果面板时，每个节点我添加了一个index属性，并用下面的代码获取，设置属性的代码类似于：
    
                        28                     markerArr[$(this).attr("index")].openInfoWindow(info); 29                }) 30             } 31         } 32     }, 33     pageCapacity: 8  34 });

这个工作在onSearchComplete中完成，关键代码如上

转载地址：http://ydsmb.baihongyu.com/

你可能感兴趣的文章