Bing InfoBox не закрывается, когда x выбран при вызове с кнопки - c # Razorsharp - PullRequest
Новая
       54

Bing InfoBox не закрывается, когда x выбран при вызове с кнопки - c # Razorsharp

0 голосов
/ 30 октября 2019

Кнопка закрытия в информационной ячейке не закрывает информационную ячейку. Я пытаюсь реализовать код на RazorSharp cshtml (C #) с помощью Bing Maps.

Я попытался использовать информационный код по умолчанию с кнопкой закрытия по умолчанию.
https://docs.microsoft.com/en-us/bingmaps/v8-web-control/map-control-concepts/infoboxes/multiple-pushpins-and-infoboxes Но если я скопирую приведенный выше код на отдельную страницу - окно закрытия работает. Но не внутри бритвенной страницы cshtml?

Я также попытался следовать примеру, чтобы использовать htmlContent вместо кода по умолчанию. https://rbrundritt.wordpress.com/2011/11/08/simple-custom-infoboxes-in-bing-maps-v7/

@model xxx.ViewModels.DriverTrackingViewModel
<head>
    <style>

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

        .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;
        }
    </style>
</head>

<div class="span-6">
    <div id="driver-location" class="box">
        <h3>Driver Locations</h3>

        <div class="content">
            <div id="myMap" style="position:relative !important; width:100%; height:400px;">
            </div>
        </div>
    </div>
</div>

@section Scripts {


    <script type="text/javascript">

        var infobox, map;

        function loadMapScenario() {

            //Convert Model to Json , then treat as array
            var results = @Html.Raw(Json.Encode(Model.Drivers));

            var pinLayer = new Microsoft.Maps.Layer();

            var apiKey = "xxx";
            map = new Microsoft.Maps.Map(document.getElementById("myMap"), { credentials: apiKey });
             //Create an infobox at the center of the map but don't show it.
            infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
                visible: false
            });
            //Assign the infobox to a map instance.
            infobox.setMap(map);
            var pinLayer = new Microsoft.Maps.Layer();

            var locs = [];
            for (var i = 0; i < results.length; i++) {
                    locs[i] = new Microsoft.Maps.Location(results[i].Latitude, results[i].Longitude);
                    var pin = new Microsoft.Maps.Pushpin(locs[i], {icon: 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/24/Map-Marker-Marker-Outside-Azure-icon.png', width:'20px', height:'20px'});
                    pin.metadata = {
                        title: 'Driver ' + results[i].DriverName,
                        description: 'Description ' + results[i].DriverName
                    };
                //Add a click event handler to the pushpin.
                Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);
                pinLayer.add(pin)
            }
                map.layers.insert(pinLayer);
            var bestview = Microsoft.Maps.LocationRect.fromLocations(locs);
                map.setView({ center: bestview.center, zoom: 8 });
         }

        function pushpinClicked(e) {

            if (e.target.metadata) {

                var html = "<span class='infobox_title'>" + e.target.metadata.title + "</span><br/>" + e.target.metadata.description;
                var pushpinFrameHTML = '<div class="infobox"><a class="infobox_close" href="javascript:closeInfobox()"><img src="../images/common/close.png"/></a><div class="infobox_content">{content}</div></div><div class="infobox_pointer"></div>';

                infobox.setOptions({
                    location: e.target.getLocation(),
                    showCloseButton: true,
                    visible: true,
                    htmlContent: pushpinFrameHTML.replace('{content}',html)
                });
            }
        }
        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 closeInfobox(){
            pinInfobox.setOptions({visible:false});
        }

    </script>
    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario' async defer></script>
}
...