api bing maps - 一个点上的多层(线和pic)

时间:2015-06-09 14:27:38

标签: javascript bing-maps bing-api

我不能在相同的坐标上创建多个图层(图像和线条)。 有谁知道你怎么处理它?<​​/ p>

示例代码:

for (; index_array < array_trip.length; index_array++) {
    latVal = array_trip[index_array].latitude;
    longVal = Microsoft.Maps.Location.normalizeLongitude(array_trip[index_array].longitude);
    map.setView({ center: new Microsoft.Maps.Location(latVal, longVal) });
    var pushpinOptions = { icon: path + 'car.png', width: 50, height: 50 };
    var pushpin = new Microsoft.Maps.Pushpin({ latitude: latVal, longitude: longVal }, pushpinOptions);   
   map.entities.push(pushpin);
}

2 个答案:

答案 0 :(得分:0)

首先,不要在数组中设置地图视图。这只会导致问题。其次,确保图钉图标的URL正确无误。也许现在尝试删除该选项,直到您看到地图上显示的默认图钉,然后尝试添加自定义图标。

如果您想将数据分成多个图层,则应使用EntityCollection&#39; s:https://msdn.microsoft.com/en-us/library/gg427616.aspx

以下是关于分层的好文章:https://rbrundritt.wordpress.com/2011/10/13/multiple-pushpins-and-infoboxes-in-bing-maps-v7/

答案 1 :(得分:0)

使用可以初始化EntityCollection object一次向地图添加多个实体。

示例

function GetMap() {

    var locations = [
        new Microsoft.Maps.Location(60.173783, 24.941068),
        new Microsoft.Maps.Location(59.338575, 18.065823),
        new Microsoft.Maps.Location(59.922602, 10.749411),
        new Microsoft.Maps.Location(55.675817, 12.570452)
    ];

    var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), { credentials: "Bing Maps Key" });

    //1. Add pushpins
    for (var i = 0; i < locations.length; i++) {
        var pin = new Microsoft.Maps.Pushpin(locations[i]);
        // Add the pushpin
        map.entities.push(pin);
    }


    //2. Add a polyline
    var line = new Microsoft.Maps.Polyline(locations);
    map.entities.push(line);


    //3. Add a polygon 
    var polygoncolor = new Microsoft.Maps.Color(100, 100, 0, 100);
    var polygon = new Microsoft.Maps.Polygon(locations, { fillColor: polygoncolor, strokeColor: polygoncolor });
    map.entities.push(polygon);

    var bestview = Microsoft.Maps.LocationRect.fromLocations(locations);
    map.setView({ bounds: bestview });
}
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<body onload="GetMap();">
    <div id='mapDiv' style="position:relative; width:600px; height:600px;"></div>
</body>