时间戳

首页 > 解决方案 > 在 Asp.net C# Web 应用程序中集成 Bing 地图

javascript - 在 Asp.net C# Web 应用程序中集成 Bing 地图

问题描述

<%@ 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)

我想在我的网络表单上显示一张地图，并在地图上标记一些点。这些点的纬度和经度应该来自数据库。

标签： javascriptc#asp.net

解决方案

欢迎来到堆栈溢出。您的地图加载async defer无法保证在您的函数中调用命名空间 Microsoft 时可用：

<body onload="GetMap();">

使用您在脚本包含标签中定义的回调：

loadMapScenario

这将在 Microsoft js lib 加载完成后运行。

推荐阅读