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キーを作成したばかりです。
私は何が欠けていますか?どんな助けでもありがたいです。