【发布时间】：2013-01-03 05:11:01
【问题描述】：
我正在学习如何在网页上使用 Bing Maps AJAX 控件 7.0，在处理基于 documentation 的示例时遇到了这个错误：
'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 地图密钥。
我错过了什么？任何帮助将不胜感激。
【问题讨论】：
标签： asp.net webforms maps bing-maps