javascript - カスタム HTML Infobox を使用した複数の Bing Map 画鋲

Question

カスタム インフォボックスを使用して複数の Bing Map プッシュピンを読み込む例を探していました。たくさん検索してつなぎ合わせた後。私は解決策に来ました。それは私のコンピューターで動作します。

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;
}