2011-10-05 24 views
6

Tôi đang cố gắng thêm nhiều đinh ghim với hộp thông tin riêng biệt. điều đó có nghĩa là mỗi đinh ghim sẽ có hộp thông tin riêng của họ với thông tin riêng. có một loop.inside rằngNhiều đinh ghim với hộp thông tin trong Bản đồ Bing

latlng = new Microsoft.Maps.Location(latitude[pointerCount], longtitue[pointerCount]); 
MarkingLocation[pointerCount] = new Microsoft.Maps.Pushpin(latlng, {icon:"marker2.ico", height:50, width:50, anchor:new Microsoft.Maps.Point(0,50)}); 

myInfobox = new Microsoft.Maps.Infobox(latlng, myinfoboxOption); 

Microsoft.Maps.Events.addHandler(MarkingLocation[pointerCount], 'click', function() {myInfobox.setOptions({ visible:true });});   
map.entities.push(MarkingLocation[pointerCount]); 
map.entities.push(myInfobox); 

Vấn đề là nó chỉ hiển thị hộp thông tin cuối cùng cho mỗi đinh ghim. Giả sử tôi có 4 chiếc đinh ghim ở Londom, Pháp, Đức, Mỹ. bây giờ không có vấn đề mà pin tôi đã nhấp vào, nó chỉ hiển thị các thông tin Mỹ trên Mỹ pushpin.please bất cứ ai có thể giúp đỡ những gì tôi đã mất tích .........

Và một điều nữa, có thể bất cứ ai xin vui lòng cho thấy cách để sử dụng htmlContent trong infobox. Tôi đã cố gắng để thiết lập nó thrugh tùy chọn, nhưng nó không woring ......

myinfoboxoption = {width:300, 
           height: 100, 
           title: str_loc, 
           htmlContent: htmlc, 
           showPointer: false, 

           offset: new Microsoft.Maps.Point(-100,0)}; 

Xin hãy giúp ........

Trả lời

35

Đây là cách tôi thực hiện nhiều hộp thông tin:

<html> 
<head> 
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script> 
<script> 
    var pinInfoBox; //the pop up info box 
    var infoboxLayer = new Microsoft.Maps.EntityCollection(); 
    var pinLayer = new Microsoft.Maps.EntityCollection(); 
    var apiKey = "YourKey"; 

    function GetMap() { 

     map = new Microsoft.Maps.Map(document.getElementById("map"), {credentials: apiKey}); 

     // Create the info box for the pushpin 
     pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false }); 
     infoboxLayer.push(pinInfobox); 


     for (var i = 0 ; i < 10; i++){ 
      //add pushpins 
      var latLon = new Microsoft.Maps.Location(Math.random()*180-90, Math.random()*360-180); 
      var pin = new Microsoft.Maps.Pushpin(latLon); 
      pin.Title = name;//usually title of the infobox 
      pin.Description = "blahblahblah, "+ i; //information you want to display in the infobox 
      pinLayer.push(pin); //add pushpin to pinLayer 
      Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox); 
     } 

     map.entities.push(pinLayer); 
     map.entities.push(infoboxLayer); 

    } 

    function displayInfobox(e) { 
     pinInfobox.setOptions({title: e.target.Title, description: e.target.Description, visible:true, offset: new Microsoft.Maps.Point(0,25)}); 
     pinInfobox.setLocation(e.target.getLocation()); 
    } 

    function hideInfobox(e) { 
     pinInfobox.setOptions({ visible: false }); 
    } 
</script> 

<style> 
    #map { position: absolute; top: 20; left: 10; width: 700px; height: 500px; border:#555555 2px solid;} 
</style> 
</head> 
<body onload="GetMap()"> 
    <div id="map"> 
    </div> 
</body> 

cuối cùng, bạn sẽ nhận được một cái gì đó như thế này: enter image description here

0

Sửa đổi: pin.Title = "TITLE:" + i; // thường là tiêu đề của hộp thông tin

Các vấn đề liên quan