3. 使用 Virtual Earth VEMap 控件

　　在此练习中，您将向一个网页添加客户端代码，以在Virtual Earth VEMap 控件中显示从GeoRSS 订阅源检索到的空间数据。VEMap 控件是可以使用 JavaScript 代码编程的客户端控件。使用客户端代码对 VEMap 控件进行编程的好处是您可以轻松构建集成 Internet 上的多个源中的数据的混合 Web 应用程序。

　　注意：您可以从 C:\SQLHOLS\Spatial and VE\Solution\StoreFinderSite 中的完成的网站页面复制此练习中所用的代码。

　　添加代码以显示地图

　　1. 在解决方案资源管理器中，双击 Default.aspx 在设计器中打开它。

　　2. 如果它还未被选中，请单击设计器左下部的源选项卡查看此页的 HTML 源文件。

　　3. 在注释 add a reference to the Virtual Earth map control下，添加以下 HTML。

　　4. 在 GetMap JavaScript 函数中，在注释 Display the map control下，添加以下代码。

　　map = new VEMap('mapDiv');

　　map.LoadMap();

　　5. 保存 Default.aspx。

　　6. 在解决方案资源管理器中，右键单击 Default.aspx，然后单击设为起始页。

　　7. 在调试菜单上，单击开始执行(不调试)。

　　8. 当 Internet Explorer 打开时，验证显示了地图。

　　9. 使用地图上的内置控件移动、缩放和更改视图。

　　10. 关闭 Internet Explorer。

　　添加代码以在地图上显示所有商店

　　1. 在 Default.aspx 中的 ShowAllStores 函数中，在注释 Import GeoRSS feed of store data, and call onAllStoreLoad function when the data is loaded下，添加以下代码。

　　var veLayerSpec = new VEShapeSourceSpecification(VEDataType.GeoRSS,

　　"./Stores.georss");

　　map.ImportShapeLayerData(veLayerSpec, onAllStoreLoad, true);

　　注意：此代码向网站发送针对 Stores.georss 页的请求。此请求将由您在上一练习中实现的 HTTP 处理程序处理，并返回包含所有商店的 GeoRSS 订阅源。接着此代码将 GeoRSS 数据作为新层加载到地图控件中，并指定在将此数据加载到地图中后调用 onAllStoreLoad 函数。

　　2. 在 onAllStoreLoad 函数中，在注释 Count the shapes returned下，添加以下代码。

　　var storecount = feed.GetShapeCount();

　　document.getElementById("Info").innerHTML =

　　'There are ' + storecount + ' stores.';

　　3. 保存 Default.aspx。

　　4. 在调试菜单上，单击开始执行(不调试)。

　　5. 当 Internet Explorer 打开时，单击 Show All Stores，并验证商店在地图上显示为图钉。

　　6. 关闭 Internet Explorer。

　　添加代码以显示指定位置附近的商店

　　1. 在 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下，添加以下代码。

　　results = map.Find( null,

　　document.getElementById("SearchLocation").value,

　　null, null,null, 1, false, false, false, true,

　　onFind);

　　注意：此代码使用 Virtual Earth 根据用户输入的文本查找位置。当找到一个或多个位置时，此代码会指定应调用 OnFind 函数。

　　2. 在 onFind 函数中，在注释 define the search point as the latitude and longitude of the first place in the results下，添加以下代码。

　　var SearchFromPoint = places[0].LatLong;

　　注意：此代码取用在结果中找到的第一个位置，并以逗号分隔的字符串的形式提取纬度和经度。

　　3. 在 onFind 函数中，在注释 Import GeoRSS feed of stores near the search point, and call onNearbyStoresLoad function when the data is loaded下，添加以下代码。

　　var veLayerSpec = new VEShapeSourceSpecification(VEDataType.GeoRSS,

　　"./Stores.georss?SearchFrom=" + SearchFromPoint);

　　map.ImportShapeLayerData(veLayerSpec, onNearbyStoresLoad, true);

　　注意：此代码向网站发送针对 Stores.georss 页的请求，该请求使用一个包含搜索位置的纬度和经度的 SearchFrom 参数。此请求将由您在上一练习中实现的 HTTP 处理程序处理，并返回包含搜索区域和其中的所有商店的 GeoRSS 订阅源。接着，此代码将 GeoRSS 数据作为新层加载到地图控件中，并指定在将此数据加载到地图中后调用 onNearbyStoresLoad 函数。

　　4. 在 onNearbyStoresLoad 函数中，在注释 Don't count or show the first shape (the search location)下，添加以下代码。

　　var storecount = feed.GetShapeCount()-1;

　　feed.GetShapeByIndex(0).HideIcon();

　　document.getElementById("Info").innerHTML =

　　'There are ' + storecount + ' stores.';

　　5. 在 onNearbyStoresLoad 函数中，在注释 Show the info for the search area when the results first load下，添加以下代码。

　　map.ShowInfoBox(feed.GetShapeByIndex(0));

　　注意：此代码将显示搜索区域的信息气球。

　　6. 保存 Default.aspx。

　　7. 在调试菜单上，单击开始执行(不调试)。

　　8. 当 Internet Explorer 打开时，输入文本 Seattle 并单击 Show Stores Near，然后验证这些商店在地图中显示为图钉并用一个圆圈显示搜索区域。

　　9. 使用位置 San Francisco 和90210 重复此搜索。

　　10. 关闭 Internet Explorer。

　　11. 关闭 Visual Studio。

　　12. 关闭 Hyper-V，放弃更改。