百度地图api js版 多标注如何在地图上按照合适的缩放比例全部展示出来? 请教了
js版api。我使用地址解析给地图添加了多个标注,不知道怎样以合适的缩放比例将所有标注都展示在可视范围里。本来打算使用Map.setViewport方法,方法需要提供一个...
js版api。我使用地址解析给地图添加了多个标注,不知道怎样以合适的缩放比例将所有标注都展示在可视范围里。本来打算使用 Map.setViewport方法,方法需要提供一个代表所有标注位置的Point类型的数组。
伪代码如下:
var map = new Map();
var array = new Array();
array[0] = "地址1";
array[1] = "地址2"
var points = new Array();
for(遍历数组 i){
address = getAddress(array[i]);
city = getCity(array[i]);
var myGeo = new BMap.Geocoder();
myGeo.getPoint(address, function(point)
{
if (point){
var marker = new BMap.Marker(point);
map.addOverlay(marker); // 将标注添加到地图中
points.push(point);
}
}, city);
}
map.setViewport(points);
问题来了,由于points.push(point)操作是在回调函数里进行的,我发现map.setViewport(points);会先执行,此时points里还没有对象,之后才会执行各个地址解析的回调函数。
请教各位高手,这种批量解析地址添加标注,以合适的缩放比例显示所有标注的需求应该怎么实现?是不是我的逻辑有问题?
谢谢大家。 展开
伪代码如下:
var map = new Map();
var array = new Array();
array[0] = "地址1";
array[1] = "地址2"
var points = new Array();
for(遍历数组 i){
address = getAddress(array[i]);
city = getCity(array[i]);
var myGeo = new BMap.Geocoder();
myGeo.getPoint(address, function(point)
{
if (point){
var marker = new BMap.Marker(point);
map.addOverlay(marker); // 将标注添加到地图中
points.push(point);
}
}, city);
}
map.setViewport(points);
问题来了,由于points.push(point)操作是在回调函数里进行的,我发现map.setViewport(points);会先执行,此时points里还没有对象,之后才会执行各个地址解析的回调函数。
请教各位高手,这种批量解析地址添加标注,以合适的缩放比例显示所有标注的需求应该怎么实现?是不是我的逻辑有问题?
谢谢大家。 展开
1个回答
展开全部
/* 地图上定位点 */
function anchorPoint(markerArr){
var point = new Array(); //标注点经纬信息
var marker = new Array(); //存放标注点对象
var info = new Array(); //存放提示信息窗口对象的数组
var searchInfoWindow =new Array();//存放检索信息窗口对象的数组
for (var i = 0; i < markerArr.length; i++) {
var lng = markerArr[i].lng;
var lat = markerArr[i].lat;
point[i] = new BMap.Point(lng, lat);
marker[i] = new BMap.Marker(point[i]);
if(markerArr[i].parkEmptyCount >= 20 && markerArr[i].parkEmptyUpdateDate != null){
var icons = MAT_HOST + "/public/images/green.png"; //图片路径
var icon = new BMap.Icon(icons, new BMap.Size(24, 26),{
anchor: new BMap.Size(10, 25),
infoWindowAnchor: new BMap.Size(10, 0)
}); //显示图标大小
marker[i].setIcon(icon);//设置标签的图标为自定义图标
marker[i].disableMassClear();
map.addOverlay(marker[i]);//将标签添加到地图中去
}
if(markerArr[i].parkEmptyCount > 0 && markerArr[i].parkEmptyCount < 20 && markerArr[i].parkEmptyUpdateDate != null){
var icons = MAT_HOST + "/public/images/orange.png";
var icon = new BMap.Icon(icons, new BMap.Size(24, 26),{
anchor: new BMap.Size(10, 25),
infoWindowAnchor: new BMap.Size(10, 0)
});
marker[i].setIcon(icon);
marker[i].disableMassClear();
map.addOverlay(marker[i]);
}
if(markerArr[i].parkEmptyCount == 0 || markerArr[i].parkEmptyUpdateDate == null){
var icons = MAT_HOST + "/public/images/red.png";
var icon = new BMap.Icon(icons, new BMap.Size(24, 26),{
anchor: new BMap.Size(10, 25),
infoWindowAnchor: new BMap.Size(10, 0)
});
marker[i].setIcon(icon);
marker[i].disableMassClear();
map.addOverlay(marker[i]);
}
var parkEmptyUpdateDate = markerArr[i].parkEmptyUpdateDate;
parkEmptyUpdateDate = $.dateFormat({date:parkEmptyUpdateDate});
if(parkEmptyUpdateDate == ""){
markerArr[i].parkEmptyCount = "未知";
}
info[i] = '<div style="padding:5px;font-size:12px;line-height:16px;">';
info[i] += ' <p style="padding:4px 0;">地址:'+markerArr[i].addr+'</p>';
info[i] += ' <p style="padding:4px 0;">空车位个数:' + markerArr[i].parkEmptyCount + '</p>';
if(parkEmptyUpdateDate != ""){
info[i] += ' <p style="padding:4px 0;">最后更新时间:' + parkEmptyUpdateDate;
}
info[i] += '</div>';
searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, info[i], {
title: '<strong>'+markerArr[i].unitName+'</strong>', //标题
width:300, //宽度
panel:"panel", //检索结果面板
enableAutoPan : true, //自动平移
searchTypes:[
BMAPLIB_TAB_SEARCH, //周边检索
BMAPLIB_TAB_TO_HERE, //到这里去
BMAPLIB_TAB_FROM_HERE //从这里出发
]
});
//鼠标移上事件
marker[i].addEventListener("mouseover", (function(k){
return function(){
searchInfoWindow[k].open(marker[k]); //在marker上打开检索信息窗口
}
})(i));
map.addEventListener("click", (function(k){
return function(){
searchInfoWindow[k].close(marker[k]); //在marker上打开检索信息窗口
}
})(i));
}
}
循环打印就行了
function anchorPoint(markerArr){
var point = new Array(); //标注点经纬信息
var marker = new Array(); //存放标注点对象
var info = new Array(); //存放提示信息窗口对象的数组
var searchInfoWindow =new Array();//存放检索信息窗口对象的数组
for (var i = 0; i < markerArr.length; i++) {
var lng = markerArr[i].lng;
var lat = markerArr[i].lat;
point[i] = new BMap.Point(lng, lat);
marker[i] = new BMap.Marker(point[i]);
if(markerArr[i].parkEmptyCount >= 20 && markerArr[i].parkEmptyUpdateDate != null){
var icons = MAT_HOST + "/public/images/green.png"; //图片路径
var icon = new BMap.Icon(icons, new BMap.Size(24, 26),{
anchor: new BMap.Size(10, 25),
infoWindowAnchor: new BMap.Size(10, 0)
}); //显示图标大小
marker[i].setIcon(icon);//设置标签的图标为自定义图标
marker[i].disableMassClear();
map.addOverlay(marker[i]);//将标签添加到地图中去
}
if(markerArr[i].parkEmptyCount > 0 && markerArr[i].parkEmptyCount < 20 && markerArr[i].parkEmptyUpdateDate != null){
var icons = MAT_HOST + "/public/images/orange.png";
var icon = new BMap.Icon(icons, new BMap.Size(24, 26),{
anchor: new BMap.Size(10, 25),
infoWindowAnchor: new BMap.Size(10, 0)
});
marker[i].setIcon(icon);
marker[i].disableMassClear();
map.addOverlay(marker[i]);
}
if(markerArr[i].parkEmptyCount == 0 || markerArr[i].parkEmptyUpdateDate == null){
var icons = MAT_HOST + "/public/images/red.png";
var icon = new BMap.Icon(icons, new BMap.Size(24, 26),{
anchor: new BMap.Size(10, 25),
infoWindowAnchor: new BMap.Size(10, 0)
});
marker[i].setIcon(icon);
marker[i].disableMassClear();
map.addOverlay(marker[i]);
}
var parkEmptyUpdateDate = markerArr[i].parkEmptyUpdateDate;
parkEmptyUpdateDate = $.dateFormat({date:parkEmptyUpdateDate});
if(parkEmptyUpdateDate == ""){
markerArr[i].parkEmptyCount = "未知";
}
info[i] = '<div style="padding:5px;font-size:12px;line-height:16px;">';
info[i] += ' <p style="padding:4px 0;">地址:'+markerArr[i].addr+'</p>';
info[i] += ' <p style="padding:4px 0;">空车位个数:' + markerArr[i].parkEmptyCount + '</p>';
if(parkEmptyUpdateDate != ""){
info[i] += ' <p style="padding:4px 0;">最后更新时间:' + parkEmptyUpdateDate;
}
info[i] += '</div>';
searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, info[i], {
title: '<strong>'+markerArr[i].unitName+'</strong>', //标题
width:300, //宽度
panel:"panel", //检索结果面板
enableAutoPan : true, //自动平移
searchTypes:[
BMAPLIB_TAB_SEARCH, //周边检索
BMAPLIB_TAB_TO_HERE, //到这里去
BMAPLIB_TAB_FROM_HERE //从这里出发
]
});
//鼠标移上事件
marker[i].addEventListener("mouseover", (function(k){
return function(){
searchInfoWindow[k].open(marker[k]); //在marker上打开检索信息窗口
}
})(i));
map.addEventListener("click", (function(k){
return function(){
searchInfoWindow[k].close(marker[k]); //在marker上打开检索信息窗口
}
})(i));
}
}
循环打印就行了
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询