2015-06-03 4 views
1

Я хочу добавить больше кнопок на этой карте. Я пытаюсь только скопировать его часть:bing maps add more pushpins

longitude[1] = 41.799645  //second defined Location 
latitude[1] = 20.913514 
title[1] = "Kipper Market" 
description[1] = "Kipper Gostivar" 

но я не вижу никаких других добавленных контактов! кто-то может помочь. * Я почти ничего не знаю о скрипте java, поэтому, пожалуйста, не судите меня, если я не буду правильно формулировать свой вопрос. thanx!

 function GetMap() { 
      var longitude = new Array(); 
      var latitude = new Array(); 
      var title = new Array(); 
      var description = new Array(); 


      longitude[0] = 42.0076215  //two defined locations 
      latitude[0] = 20.9689308 
      title[0] = "Kipper Market" 
      description[0] = "Braka Miladinovi 178, 1200 Tetovë, Tetovo, Macedonia" 

      longitude[1] = 41.799645  //second defined Location 
      latitude[1] = 20.913514 
      title[1] = "Kipper Market" 
      description[1] = "Kipper Gostivar" 

      var total = 0    //number of locations 

      var pinInfoBox; //the pop up info box 
      var infoboxLayer = new Microsoft.Maps.EntityCollection(); 
      var pinLayer = new Microsoft.Maps.EntityCollection(); 
      var apiKey = "<api key>"; 

      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 < 3; i++){ 
       //add pushpins 
       var latLon = new Microsoft.Maps.Location(longitude[i], latitude[i]); 
       var pin = new Microsoft.Maps.Pushpin(latLon); 

       pin.Title = title[i];//usually title of the infobox 
       pin.Description = description[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); 
      map.setView({zoom: 10, center: new Microsoft.Maps.Location(41.9117244, 21.0254933)}); 


     } 

     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: relative; top: 0; left: 0; width: 100%; height: 800px; border:none;} 
    </style> 
    </head> 
    <body onload="GetMap()"> 
     <div id="some stuff" style="width=100%; height:80px"> 
      some text 
     </div> 
     <div id="map" style="width=100%; height:400px"> 
     </div> 
     <div id="some more stuff" style="width=100%; height:80px"> 
      some more text 
     </div>    
    </body> 
</html> 

ответ

2

В следующем примере показано, как добавить несколько защелки в Bing Maps:

var pinInfobox; 
 

 
function GetMap() { 
 

 
    var pushpinInfos = []; 
 
    pushpinInfos[0] = { 'lat': 42.0076215, 'lng': 20.9689308, 'title': 'Kipper Market', 'description': 'Braka Miladinovi 178, 1200 Tetovë, Tetovo, Macedonia' }; 
 
    pushpinInfos[1] = { 'lat': 41.799645, 'lng': 20.913514, 'title': 'Kipper Market', 'description': 'Kipper Gostivar' }; 
 

 
    var infoboxLayer = new Microsoft.Maps.EntityCollection(); 
 
    var pinLayer = new Microsoft.Maps.EntityCollection(); 
 
    var apiKey = "<api key>"; 
 

 
    var 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); 
 

 
    var locs = []; 
 
    for (var i = 0 ; i < pushpinInfos.length; i++) { 
 
     locs[i] = new Microsoft.Maps.Location(pushpinInfos[i].lat, pushpinInfos[i].lng); 
 
     var pin = new Microsoft.Maps.Pushpin(locs[i]); 
 
     pin.Title = pushpinInfos[i].title; 
 
     pin.Description = pushpinInfos[i].description; 
 
     pinLayer.push(pin); 
 
     Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox); 
 
    } 
 

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

 
    var bestview = Microsoft.Maps.LocationRect.fromLocations(locs); 
 
    map.setView({ center: bestview.center, zoom: 10 }); 
 
} 
 

 
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 src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0" type="text/javascript" charset="UTF-8"></script> 
 
<body onload="GetMap();"> 
 
    <div id="map" style="position: relative; width: 600px; height: 450px;"></div> 
 
</body>

+0

Thnx для ответа @Vadim но может у пожалуйста, скажите мне, что мне нужно добавить в мой код выше для добавления еще одного булавки (наряду с инфобоксами, конечно). потому что код ur по какой-то причине не работает на моем сайте. мой код работает, но я не могу добавить больше двух этих контактов. im с использованием WP. поэтому какую часть кода мне нужно дублировать, чтобы добавить другие контакты? thnx –

+0

В вашем коде добавлено жестко закодированное количество кнопок, поэтому вы можете просто заменить «i <3» на «i

+0

Да, человек. этот работал. Большое спасибо! к сожалению, в комментариях нет возможности выбора. thnx для помощи ур. –

Смежные вопросы