Asp.net Can';t加载Bing映射:";已加载';脚本代码(Windows Internet Explorer)和#x27&引用;错误
我正在学习如何在网页上使用Bing Maps AJAX control 7.0,在编写基于以下内容的示例时遇到了此错误: 我的页面由一个带有地图的面板、一个用于查找位置的面板(工作进度)和一个用于通过纬度和经度加上缩放和视图样式显示位置的面板组成。我的aspx中的代码如下所示:Asp.net Can';t加载Bing映射:";已加载';脚本代码(Windows Internet Explorer)和#x27&引用;错误,asp.net,webforms,maps,bing-maps,Asp.net,Webforms,Maps,Bing Maps,我正在学习如何在网页上使用Bing Maps AJAX control 7.0,在编写基于以下内容的示例时遇到了此错误: 我的页面由一个带有地图的面板、一个用于查找位置的面板(工作进度)和一个用于通过纬度和经度加上缩放和视图样式显示位置的面板组成。我的aspx中的代码如下所示: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CSASPNETBingMaps.Defau
<%@ 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>
var-map=null;
var style=Microsoft.Maps.MapTypeId.road;
函数LoadMap(){
//创建Map类的新实例
//pnlBingMap是面板的ID
//在地图上显示用户的当前位置
var mapOptions={凭证:“bing映射键”,mapTypeId:style};
var map=new Microsoft.Maps.map(document.getElementById('pnlBingMap',mapOptions));
var geoLocationProvider=新的Microsoft.Maps.geoLocationProvider(map);
geoLocationProvider.getCurrentPosition();
}
函数SetMap(){
//设置纬度值
var lat=document.getElementById(“txtLatitude”).value;
//设置经度值
var lng=document.getElementById(“txt经度”).value;
//检查纬度和经度是否都已设置
如果(液化天然气=“”|纬度=“”){
警报(“您需要先输入纬度和经度。”);
返回;
}
//设置缩放级别
var ddlzoom=document.getElementById(“ddlZoomLevel”);
var zoom=ddlzoom.options[ddlzoom.selectedIndex].value;
//重置映射实例
var options=map.getOptions();
options.mapTypeId=样式;
options.zoom=缩放;
options.center=新的Microsoft.Maps.Location(纬度、液化天然气);
map.setView(选项);
//在这个位置上放一个别针
var pin=新的Microsoft.Maps.Pushpin(options.center);
地图。实体。推(销);
}
函数FindLoc(){
//这里会有事情发生
}
函数设置样式{
如果(s=“r”){
style=Microsoft.Maps.MapTypeId.road;
}
否则{
style=Microsoft.Maps.MapTypeId.air;
}
}
.地图
{
位置:绝对位置;
宽度:700px;
高度:500px;
边框:#555555 2px实心;
}
必应地图
查找位置:
地点:
显示地图:
视图样式:
道路
空中的
缩放级别:
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
十七,
18
19
拉丁美洲:
液化天然气:
我已经在IE 10和Google Chrome上测试了该页面,但在这两个页面上,地图显示如下:
它说我的凭据无效,但我刚刚创建了Bing地图密钥
我错过了什么?任何帮助都将不胜感激
var mapOptions = { credentials: "bing map key", mapTypeId: style };
字符串“bing地图键”不是有效的bing地图键。把实际的钥匙放在那里。钥匙是
AjtUzWJBHlI3MaKe6Qv2fGRXEs0ua5hUQi54ECwfXTiWsitll4AkETZDihjcfeI
它应该是有效的,我刚刚创建了它。我试过那个钥匙,它似乎工作正常。你确定你的web浏览器没有缓存带有无效密钥的javascript吗?我正在检查web浏览器中的源代码,并且密钥是相同的,还可能是什么?不知道,请致电Bing支持。同时,您可以使用此键,它来自V7交互式SDK:AjtUzWJBHlI3Ma_Ke6Qv2fGRXEs0ua5hUQi54ECwfXTiWsitll4AkETZDihjcfeI
var mapOptions = { credentials: "bing map key", mapTypeId: style };