您的位置:首页 > 其它

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

2017-11-15 17:41 1176 查看
先说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
.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
.id + ',POI的名称为:' + pois
.name + ',POI的地址为:' + pois
.address + ',POI的类型为:' + pois
.type + '</div>');
infoWin.setPosition(pois
.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自定义标注的效果:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐