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


先说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('
' + 'POI的ID为:' + pois[n].id + ',POI的名称为:' + pois[n].name + ',POI的地址为:' + pois[n].address + ',POI的类型为:' + pois[n].type + '
'); infoWin.setPosition(pois[n].latLng); }); })(i); } //调整地图视野 map.fitBounds(latlngBounds); }, //若服务请求失败,则运行以下函数 error: function() { alert("出错了。"); } });
效果如下:

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



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

看一下官方文档:


//设置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自定义标注的效果:

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

你可能感兴趣的:(javascript)