练习 3: 使用Virtual Earth VEMap 控件
在本练习中,您将向页面中添加一些客户端代码,来将从上面的GeoRSS源中获得的地理信息数据显示在Virtual Earth VEMap 控件当中。VEMap 控件是一个客户端控件,您可以使用JavaScript 代码来对它进行编程。使用客户端代码来编辑VEMap控件的优势在于,您可以简单的构建一个mash-up Web 应用程序,它可以与来自于Internet上多种不同数据源的数据进行集成。
添加代码以显示地图
在 Solution Explorer中,双击Default.aspx ,在设计器中打开它进行编辑。
如果它已经被打开,点击设计器左下方的Source 选项卡,从而查看页面的HTML源代码。
在add a reference to the Virtual Earth map control注释下方,添加下面的HTML代码。
</script>
在GetMap 函数当中,在Display the map control注释下方,添加下面的代码。
map.LoadMap();
保存 Default.aspx。
在Solution Explorer中,右击Default.aspx,然后点击Set as Start Page。
在Debug 菜单中,点击Start Debugging。
当Internet Explorer 打开后,确认地图已经被显示出来。
使用地图中内置的控件来进行移动浏览,放大,缩小,以及更改视图。
关闭Internet Explorer。
添加代码并在地图中显示所有商店
在 Default.aspx中,在ShowAllStores 函数中,在Import GeoRSS feed of store data, and call onAllStoreLoad function when the data is loaded注释下方,添加下面的代码。
"./Stores.georss");
map.ImportShapeLayerData(veLayerSpec, onAllStoreLoad, true);
注意: 这段代码将会把Stores.georss页面的请求结果发送到Web页面当中。这个请求将会使用HTTP Handler 进行处理,它使用前面练习中输入的代码来实现,并返回包含所有商店的GeoRSS源。然后,该代码将GeoRSS数据加载为一个新的层,并显示在地图控件当中,并且当数据被成功加载到地图当中后,调用onAllStoreLoad 函数。
在onAllStoreLoad 函数当中,在Count the shapes returned 注释下面,添加下面的代码。
document.getElementById("Info").innerHTML =
'There are ' + storecount + ' stores.';
保存 Default.aspx。
在Debug 菜单中,点击Start Debugging。
在Internet Explorer 打开后,点击Show All Stores ,然后确认所有的商店都被显示在地图中,并用一些“别针”来显示。
关闭Internet Explorer。
添加代码并在地图中显示特定位置附近的商店
在 Default.aspx中,在ShowNearbyStores 函数中,在Use the VEMap.Find method to find the location entered by the user and call the onFind function to process the results注释下方,添加下面的代码。
document.getElementById("SearchLocation").value,
null, null,null, 1, false, false, false, true,
onFind)
注意: 这段代码使用Virtual Earth 来查找一个基于用户输入的文本查找的特定位置。当一个或多个位置被查找到后,代码会调用OnFind 函数。
在onFind 函数当中,在define the search point as the latitude and longitude of the first place in the results注释下面,添加下面的代码。
注意: 这段代码处理结果中发现的第一个位置,并将这个用逗号分隔的字符串提取出经度和纬度值。
在onFind 函数当中,在Import GeoRSS feed of stores near the search point, and call onNearbyStoresLoad function when the data is loaded注释下面,添加下面的代码。
"./Stores.georss?SearchFrom=" + SearchFromPoint);
map.ImportShapeLayerData(veLayerSpec, onNearbyStoresLoad, true);
注意: 这段代码将发送请求到Stores.georss 页面,并在请求中添加SearchFrom 参数,这个参数中包含了搜索区域的经度和纬度值。这个请求由上面我们实现的HTTP Handler 进行处理,并返回包含搜索区域及其中所有商店位置的GeoRSS源。这段代码的后面将GeoRSS数据加载到到地图控件中,显示为一个新的层,然后在加载完成后调用onNearbyStoresLoad 函数。
在 onNearbyStoresLoad 函数中,在Don't count or show the first shape (the search location)注释下面,添加下面的代码。
feed.GetShapeByIndex(0).HideIcon();
document.getElementById("Info").innerHTML =
'There are ' + storecount + ' stores.';
在 onNearbyStoresLoad 函数中,在Show the info for the search area when the results first load注释下面,添加下面的代码。
注意: 这段代码显示了搜索区域的信息提示气泡。
保存 Default.aspx。
在Debug 菜单中,点击Start Debugging。
在Internet Explorer 打开后,输入Seattle ,然后点击Show Stores Near ,然后确认所有搜索出来的商店将会在地图上显示为一些别针,并会使用一个圆形显示搜索区域。
重复搜索过程,输入San Francisco 和90210。
关闭Internet Explorer。
关闭Visual Studio。
关闭Virtual PC 并不要保存任何更改。