腾讯地图poi关键词检索,点击标注获取坐标位置等信息,无法自定义标注的解决方法

来源:互联网 发布:javlib最新域名2017 编辑:程序博客网 时间:2024/06/04 19:57

先说poi检索:

首先实例化一个map对象,然后调用searchservice类;

//定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器     var map = new qq.maps.Map(document.getElementById("container"), {        center: new qq.maps.LatLng(39.916527,116.397128),      // 地图的中心地理坐标。        zoom:12                                                 // 地图的中心地理坐标。    });        //弹出框    var infoWin = new qq.maps.InfoWindow({        map: map    });        //调用Poi检索类。用于进行本地检索、周边检索等服务。    var searchService = new qq.maps.SearchService({        map : map,        //检索成功的回调函数            complete: function(results) {                //设置回调函数参数                var pois = results.detail.pois;                var infoWin = new qq.maps.InfoWindow({                    map: map                });                var latlngBounds = new qq.maps.LatLngBounds();                for (var i = 0, l = pois.length; i < l; i++) {                    var poi = pois[i];                    //扩展边界范围,用来包含搜索到的Poi点                    latlngBounds.extend(poi.latLng);                    (function(n) {                        var marker = new qq.maps.Marker({                        position:pois[n].latLng,                             map: map                        });                        marker.setTitle(i + 1);                   markers.push(marker);                        qq.maps.event.addListener(marker, 'click', function() {                            infoWin.open();                            infoWin.setContent('<div style="width:280px;height:100px;">' + 'POI的ID为:' +                                pois[n].id + ',POI的名称为:' + pois[n].name + ',POI的地址为:' + pois[n].address + ',POI的类型为:' + pois[n].type + '</div>');                            infoWin.setPosition(pois[n].latLng);                        });                    })(i);                }                //调整地图视野                map.fitBounds(latlngBounds);            },            //若服务请求失败,则运行以下函数            error: function() {                alert("出错了。");            }    });
效果如下:



下面再说一下,为什么代码里写了自定义标注,还是出现的是官方的标注

看一下官方文档:


//设置Poi检索服务,用于本地检索、周边检索            searchService = new qq.maps.SearchService({                //检索成功的回调函数                complete: function(results) {                    //设置回调函数参数                    var pois = results.detail.pois;                    var infoWin = new qq.maps.InfoWindow({                        map: map                    });。。。。。。。。。。

注意看一下上面标红的地方:map:map;

下面是没有加map自定义标注的效果:


阅读全文
0 0
原创粉丝点击