Интеграция Bing Maps в Asp. net C# веб-приложение - PullRequest
0 голосов
/ 25 апреля 2020
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="map.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script>  
      <script type="text/javascript">

        function GetMap() {
            var key = "Key";
            var mapOptions = { credentials: key, mapTypeId: Microsoft.Maps.MapTypeId.road, zoom: 5 }
            var infobox = null;

            var map = new Microsoft.Maps.Map('#myMap', mapOptions);
        }
            function showInfobox(e) {
                if (e.target.metadata) {
                    infobox.setOptions({
                        location: e.target.getLocation(),
                        title: e.target.metadata.title,
                        description: e.target.metadata.description,
                        visible: true
                    });
                }
            }

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

            function addMarker() {
                var marker = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(20.296059, 85.824539), { color: 'green' });

                infobox = new Microsoft.Maps.Infobox(marker.getLocation(), {
                    visible: false
                });

                marker.metadata = {
                    id: 1,
                    title: 'Bhubaneswar',
                    description: 'Bhubaneswar, Odisha'
                };

                Microsoft.Maps.Events.addHandler(marker, 'mouseout', hideInfobox);
                Microsoft.Maps.Events.addHandler(marker, 'mouseover', showInfobox);

                infobox.setMap(map);
                map.entities.push(marker);
                marker.setOptions({ enableHoverStyle: true });
            };

    </script>
</head>
<body onload="GetMap();">
    <div id="myMap" style='position: relative; width: 600px; height: 800px;'></div>
 <input type="button" value="Show Points" onclick="addMarker();" />
    <form id="form1" runat="server">

        </form>
</body>
</html>

Это мой код Webform1.aspx. Моя карта успешно загружена, но при нажатии кнопки Показать точки не отображается маркер. В консоли я получаю следующую ошибку при загрузке страницы

WebForm1.aspx:35 Uncaught ReferenceError: Microsoft is not defined
    at addMarker (WebForm1.aspx:35)
    at WebForm1.aspx:77
and on clicking show points button, I am getting the following error.
Uncaught ReferenceError: map is not defined
    at addMarker (WebForm1.aspx:50)
    at HTMLInputElement.onclick (WebForm1.aspx:62)

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

1 Ответ

1 голос
/ 25 апреля 2020

Добро пожаловать в переполнение стека. Загрузка вашей карты async defer, поэтому нет никакой гарантии, что пространство имен Microsoft доступно, когда оно вызывается в вашей функции:

<body onload="GetMap();">

Используйте обратный вызов, который вы определили в теге include скрипта :

loadMapScenario

Запустится после завершения загрузки библиотеки Microsoft js.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...