0

我正在学习如何在网页上使用 Bing Maps AJAX 控件 7.0，当我根据文档处理示例时遇到了这个错误：

'iexplore.exe' (Script): Loaded 'Script Code (Windows Internet Explorer)'. 
Exception was thrown at line 1, column 3756 in http://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20121212140046.38/js/en-us/veapicore.js
0x800a139e - JavaScript runtime error: SyntaxError

我的页面由一个带有地图的面板、一个用于查找位置的面板（正在进行中）和一个用于通过纬度和经度以及缩放和视图样式显示位置的面板组成。我的aspx中的代码是这样的：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CSASPNETBingMaps.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    <script type="text/javascript">
        var map = null;
        var style = Microsoft.Maps.MapTypeId.road;

        function LoadMap() {
            // Create a new instance of the Map Class
            // pnlBingMap is the ID of the Panel

            // Show on map user's current location

            var mapOptions = { credentials: "bing map key", mapTypeId: style };
            var map = new Microsoft.Maps.Map(document.getElementById('pnlBingMap', mapOptions));
            var geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(map);
            geoLocationProvider.getCurrentPosition();

        }

        function SetMap() {
            // Set the latitude value
            var lat = document.getElementById("txtLatitude").value;

            // Set the longitude value
            var lng = document.getElementById("txtLongitude").value;

            // Check if both of the latitude and longitude have been set
            if (lng == "" | lat == "") {
                alert("You need to input both Latitude and Longitude first.");
                return;
            }

            // Set the zoom level
            var ddlzoom = document.getElementById("ddlZoomLevel");
            var zoom = ddlzoom.options[ddlzoom.selectedIndex].value;

            // Reset the map instance
            var options = map.getOptions();
            options.mapTypeId = style;
            options.zoom = zoom;
            options.center = new Microsoft.Maps.Location(lat, lng);
            map.setView(options);
            // put a pin on the location
            var pin = new Microsoft.Maps.Pushpin(options.center);
            map.entities.push(pin);
        }

        function FindLoc() {
           //something will go here
        }

        function SetStyle(s) {
            if (s == "r") {
                style = Microsoft.Maps.MapTypeId.road;
            }
            else {
                style = Microsoft.Maps.MapTypeId.aerial;
            }
        }

    </script>
    <style type="text/css">
        .map
        {
            position: absolute;
            width: 700px;
            height: 500px;
            border: #555555 2px solid;
        }
    </style>
</head>
<body onload="LoadMap();">
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td style="width: 740px; vertical-align: text-top">
                    <b>Bing Maps</b>
                    <br />
                    <asp:Panel ID="pnlBingMap" CssClass="map" runat="server">
                    </asp:Panel>
                </td>
                <td>
                    <asp:Panel ID="pnlSearch" runat="server" DefaultButton="btnLocation">
                        <b>Find a Location:</b><br />
                        Location:
                        <asp:TextBox ID="txtLocation" runat="server"></asp:TextBox>
                        <br />
                        <asp:Button ID="btnLocation" runat="server" Text="Submit" OnClientClick="FindLoc();return false;" />
                    </asp:Panel>
                    <br />
                    <asp:Panel ID="pnlDisplayOption" runat="server">
                        <b>Show a Map:</b>
                        <br />
                        View Style:
                        <asp:RadioButtonList ID="rdlViewStyle" runat="server" RepeatDirection="Horizontal"
                            RepeatLayout="Flow">
                            <asp:ListItem Selected="True" onclick="SetStyle('r')">Road</asp:ListItem>
                            <asp:ListItem onclick="SetStyle('a')">Aerial</asp:ListItem>
                        </asp:RadioButtonList>
                        <br />
                        Zoom Level:
                        <asp:DropDownList ID="ddlZoomLevel" runat="server">
                            <asp:ListItem>1</asp:ListItem>
                            <asp:ListItem>2</asp:ListItem>
                            <asp:ListItem>3</asp:ListItem>
                            <asp:ListItem>4</asp:ListItem>
                            <asp:ListItem>5</asp:ListItem>
                            <asp:ListItem>6</asp:ListItem>
                            <asp:ListItem>7</asp:ListItem>
                            <asp:ListItem>8</asp:ListItem>
                            <asp:ListItem>9</asp:ListItem>
                            <asp:ListItem>10</asp:ListItem>
                            <asp:ListItem>11</asp:ListItem>
                            <asp:ListItem Selected="True">12</asp:ListItem>
                            <asp:ListItem>13</asp:ListItem>
                            <asp:ListItem>14</asp:ListItem>
                            <asp:ListItem>15</asp:ListItem>
                            <asp:ListItem>16</asp:ListItem>
                            <asp:ListItem>17</asp:ListItem>
                            <asp:ListItem>18</asp:ListItem>
                            <asp:ListItem>19</asp:ListItem>
                        </asp:DropDownList>
                        <br />
                        <asp:Panel ID="pnlLatLng" runat="server" DefaultButton="btnLatLng">
                            Lat:
                            <asp:TextBox ID="txtLatitude" runat="server" Text="34.0540"></asp:TextBox>
                            <br />
                            Lng:
                            <asp:TextBox ID="txtLongitude" runat="server" Text="-118.2370"></asp:TextBox>
                            <br />
                            <asp:Button ID="btnLatLng" runat="server" Text="Submit" OnClientClick="SetMap();return false;" />
                        </asp:Panel>
                    </asp:Panel>
                    <br />
                </td>
            </tr>
        </table>
        <br />
        <br />
    </div>
    </form>
</body>
</html>

我已经在 IE 10 和 Google Chrome 上测试了该页面，但在这两个地图上都显示如下： 错误

它说我的凭据无效，但我刚刚创建了 Bing Map 密钥。

我错过了什么？任何帮助将不胜感激。

4

1 回答 1

0 
var mapOptions = { credentials: "bing map key", mapTypeId: style };

该字符串"bing map key"不是有效的 Bing Map 键。把真正的钥匙放在那里。

于 2013-01-02T21:11:01.267 回答