带自定义HTML信息框的多个Bing地图图钉

Question

我一直在为一个示例来加载多个Bing地图图钉图钉与自定义信息框的插件。经过大量的搜索和拼接。我已经找到了解决办法。这适用于我的电脑。

Answer 1

的HTML代码：

<div id="map" style="height: 800px; width: 100%"></div> 
<link href="@Url.Content("~/Content/infoboxStyles.css")" rel="stylesheet" type="text/css"> 
<script type="text/javascript"> 
    $(function() { 
     var map = null; 
     var location = null; 

     var pinInfoBox; //the pop up info box 
     var infoboxLayer = new Microsoft.Maps.EntityCollection(); 
     var pinLayer = new Microsoft.Maps.EntityCollection(); 
     var pushpinFrameHTML = '<div class="infobox"><a class="infobox_close" href="javascript:closeInfobox()"><img src="@Url.Action("../images/BingMap/close.png")"/></a><div class="infobox_content">{content}</div></div><div class="infobox_pointer"><img src="@Url.Action("../images/BingMap/pointer_shadow.png")"></div>'; 

     function loadMap() { 
      // initialize the map 
      map = new Microsoft.Maps.Map(document.getElementById('map'), { 
       credentials: "Your Bing Map Id", 
       enableSearchLogo: false 

      }); 

     } 

     function showPosition(position) { 
      //display position 

      pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false }); 
      infoboxLayer.push(pinInfobox); 
      var location = position.coords; 
      var i = 0; 
      map.setView({ 
       zoom: 10, 
       center: new Microsoft.Maps.Location(location.latitude, 
                location.longitude) 
      }); 

      $.getJSON("Home/GetLocations", function (locationsArray) { 
       $.each(locationsArray, function (index, location) { 

        var pushpinOptions = { icon: '../images/BingMap/discussion-icon-ny.png', width: 30, height: 40 }; 
        var latLon = new Microsoft.Maps.Location(location.latitude, location.longitude); 
        var pin = new Microsoft.Maps.Pushpin(latLon, pushpinOptions); 
        pin.title = "Pin 1"; 
        pin.description = "This is pin0000 1<br/><i>Here is custom HTML</i>"; 
        pinLayer.push(pin);//add pushpin to pinLayer 
        Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox); 
        i++; 

       }); 
       map.entities.push(pinLayer); 
       map.entities.push(infoboxLayer); 
      }); 
     } 
     function displayInfobox(e) { 
      if (e.targetType == "pushpin") { 
       var pin = e.target; 

       var html = "<span class='infobox_title'>" + pin.title + "</span><br/>" + pin.description + "<img src='http://www.w3schools.com/images/tryitimg.gif' alt='some_text'>"; 

       pinInfobox.setOptions({ 
        visible: true, 
        offset: new Microsoft.Maps.Point(-33, 20), 
        htmlContent: pushpinFrameHTML.replace('{content}', html) 
       }); 

       //set location of infobox 
       pinInfobox.setLocation(pin.getLocation()); 
      } 
     } 

     function closeInfobox() { 
      pinInfobox.setOptions({ visible: false }); 
     } 

     function hideInfobox(e) { 
      pinInfobox.setOptions({ visible: false }); 
     } 



     function positionError(position) { 
      alert("Error getting position. Code: " + position.code); 
     } 

     loadMap(); 
     navigator.geolocation.getCurrentPosition(showPosition, positionError); 
    }); 
</script> 

CSS文件：

.infobox { 
    position: relative; 
    background-color: white; 
    border: 1px solid rgb(136, 136, 136); 
    left: 0px; 
    top: 0px; 
    width: 256px; 
} 

.infobox_close { 
    cursor: pointer; 
    position: absolute; 
    right: 5px; 
    top: 5px; 
    border: none; 
} 

.infobox_content { 
    margin: 5px; 
    font-family: Arial; 
    font-size: 11px; 
    line-height: 22px; 
} 

.infobox_pointer { 
    width: 33px; 
    height: 38px; 
    overflow: hidden; 
    position: relative; 
    z-index: 1; 
    left: 20px; 
    top: -1px; 
} 

.infobox_title { 
    font-weight: bold; 
    font-size: 15px; 
}