0

WebページでBingMapsAJAXコントロール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>

IE10とGoogleChromeでページをテストしましたが、両方のマップで次のように表示されます。 エラー

クレデンシャルが無効であると表示されますが、BingMapキーを作成したばかりです。

私は何が欠けていますか?どんな助けでもありがたいです。

4

1 に答える 1

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

文字列"bing map key"は有効な Bing Map キーではありません。そこに本物の鍵を入れます。

于 2013-01-02T21:11:01.267 に答える