软件开发培训班 >> 编程开发 >> ASPNET


ASP.NET调用V3版本的Google Maps API

　　本文标签：API

DEFAULT
HORIZONTAL_BAR
DROPDOWN_MENU
position mapTypeIds navigationControl:true/false navigationControlOptions
属性 值
Position
style
scaleControl:true/false scaleControlOptions: 和navigationControl有一样的属性 (position, style) 方法也一样. disableDoubleClickZoom: true/false
  scrollwheel: true/false
  draggable: true/false
  streetViewControl: true/false
 

　　Map Maker（地图标记）

　　Maker类提供了这样一个选项，为用户指定的位置显示一个标记，在我们的应用中地图标记是十分常用的，下面的代码将告诉大家如何创建一个简单的地图标记：

  1. varmarker = newgoogle.maps.Marker  
  2. (  
  3. {  
  4. position: newgoogle.maps.LatLng(-34.397, 150.644),  
  5. map: map,  
  6. title: Click me 
  7. }  
  8. ); 

Info Window（信息窗口）

　　我们已经在地图上某个位置加了标记，也为标记添加onclick了事件，点击可以弹出一个窗口来显示该地点的详细信息  。我们可以按照下面的代码来创建信息窗口：

  1. varinfowindow = newgoogle.maps.InfoWindow({  
  2. content: Location info:  
  3. Country Name:  
  4. LatLng:  
  5. });  
  6. google.maps.event.addListener(marker, click, function() {  
  7. // 打开窗口  
  8. infowindow.open(map, marker);  
  9. }); 

　　将它们结合起来的代码如下：

  1. Codevarmap;  
  2. functioninitialize() {  
  3. varlatlng = newgoogle.maps.LatLng(-34.397, 150.644);  
  4. varmyOptions = {  
  5. zoom: 8,  
  6. center: latlng,  
  7. mapTypeId: google.maps.MapTypeId.ROADMAP  
  8. };  
  9. map = newgoogle.maps.Map(document.getElementById("map"), myOptions);  
  10. varmarker = newgoogle.maps.Marker  
  11. (  
  12. {  
  13. position: newgoogle.maps.LatLng(-34.397, 150.644),  
  14. 　map: map,  
  15. title: Click me 
  16. }  
  17. );  
  18. varinfowindow = newgoogle.maps.InfoWindow({  
  19. content: Location info:  
  20. Country Name:  
  21. LatLng:  
  22. });  
  23. google.maps.event.addListener(marker, click, function() {  
  24. // Calling the open method of the infoWindow  
  25. infowindow.open(map, marker);  
  26. });  
  27. 　}  
  28. window.onload = initialize; 

　　利用上面的代码，我们将会在页面上创建一张地图，然后定位用户所在的区域，在这个区域加上标记，并且弹出一个显示位置信息的窗口  。

Multiple Makers（多标记）

　　有些时候，我们可以要在地图上处理多个标记，那么我们就可以用下面代码来实现：

  1. Codefunctionmarkicons() {  
  2. InitializeMap();  
  3. varltlng = [];  
  4. ltlng.push(newgoogle.maps.LatLng(40.756, -73.986));  
  5. ltlng.push(newgoogle.maps.LatLng(37.775, -122.419));  
  6. ltlng.push(newgoogle.maps.LatLng(47.620, -122.347));  
  7. ltlng.push(newgoogle.maps.LatLng(-22.933, -43.184));  
  8. for(vari = 0; i <= ltlng.length;i++) {  
  9. marker = newgoogle.maps.Marker({  
  10. map: map,  
  11. position: ltlng[i]  
  12. });  
  13. (function(i, marker) {  
  14. google.maps.event.addListener(marker, click, function() {  
  15. if(!infowindow) {  
  16. infowindow = newgoogle.maps.InfoWindow();  
  17. }  
  18. infowindow.setContent("Message" + i);  
  19. infowindow.open(map, marker);  
  20. });  
  21. })(i, marker);  
  22. }  
  23. } 

路线说明

　　一个最有用的特性之一是Google Maps API可以为任何指定的位置提供详细的路线说明，实现代码如下：

  1. CodevardirectionsDisplay;  
  2. vardirectionsService = newgoogle.maps.DirectionsService();  
  3. functionInitializeMap() {  
  4. directionsDisplay = newgoogle.maps.DirectionsRenderer();  
  5. varlatlng = newgoogle.maps.LatLng(-34.397, 150.644);  
  6. varmyOptions =  
  7. {  
  8. zoom: 8,  
  9. 　center: latlng,  
  10. mapTypeId: google.maps.MapTypeId.ROADMAP  
  11. };  
  12. varmap = newgoogle.maps.Map(document.getElementById("map"), myOptions);  
  13. directionsDisplay.setMap(map);  
  14. directionsDisplay.setPanel(document.getElementById(directionpanel));  
  15. varcontrol = document.getElementById(control);  
  16. control.style.display = block;  
  17. }  
  18. calcRoute() {  
  19. varstart = document.getElementById(startvalue).value;  
  20. varend = document.getElementById(endvalue).value;  
  21. varrequest = {  
  22. origin: start,  
  23. destination: end,  
  24. 　travelMode: google.maps.DirectionsTravelMode.DRIVING  
  25. };  
  26. directionsService.route(request, (response, status) {  
  27. if(status== google.maps.DirectionsStatus.OK) {  
  28. directionsDisplay.setDirections(response);  
  29. }  
  30. });  
  31. 　}  
  32. functionwindow.onload = InitializeMap; 

Layers

　　Google Maps API为你提供了多层的选项，其中有一个是自行车层  。通过自行车层，可以为一些特别的位置显示自行车路线  。下面的代码是让你在地图上添加自行车层：

  1. Codevarmap  
  2. functionInitializeMap() {  
  3. varlatlng = newgoogle.maps.LatLng(-34.397, 150.644);  
  4. varmyOptions = {  
  5. zoom: 8,  
  6. center: latlng,  
  7. mapTypeId: google.maps.MapTypeId.ROADMAP  
  8. };  
  9. map = newgoogle.maps.Map(document.getElementById("map"), myOptions);  
  10. }  
  11. window.onload = InitializeMap;  
  12. varbikeLayer = newgoogle.maps.BicyclingLayer();  
  13. bikeLayer.setMap(map); 

　　Geocoding

　　到目前为止，我们已经学习创建Google地图的基本思想，同时也学习了如何显示位置相关的信息  。下面我们来看看用户是如何来计算位置的，Geocoding可以计算出指定区域的经度和纬度，下面的代码就告诉你如何利用API计算某个位置的经度和纬度的：

  1. Codegeocoder.geocode({ address: address }, function(results, status) {  
  2. if(status== google.maps.GeocoderStatus.OK) {  
  3. map.setCenter(results[0].geometry.location);  
  4. varmarker = newgoogle.maps.Marker({  
  5. 　map: map,  
  6. position: results[0].geometry.  
  7. });  
  8. }  
  9. else{  
  10. alert("Geocode was not successful for the following reason: " + status);  
  11. }  
  12. }); 

　　Geocoding C#

　　同样我们可以利用C#代码来计算位置：

  1. CodepublicstaticCoordinate GetCoordinates(string region)  
  2. {  
  3. 　using (varclient = newWebClient())  
  4. {  
  5. string uri = "http://maps.google.com/maps/geo?q=" + region +  
  6. 　"&output=csv&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1" +  
  7. "-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA";  
  8. string[] geocodeInfo = client.DownloadString(uri).Split(,);  
  9. returnnewpublicstruct Coordinate  
  10. {  
  11. privatedoublelat;  
  12. private 

　　Reverse Geocoding

　　顾名思义，这个是Geocoding的反操作，我们可以根据经度和纬度来找出该位置的名称  。代码如下：

  1. Codevarmap;  
  2. vargeocoder;  
  3. functionInitializeMap() {  
  4. varlatlng = newgoogle.maps.LatLng(-34.397, 150.644);  
  5. myOptions =  
  6. {  
  7. zoom: 8,  
  8. center: latlng,  
  9. mapTypeId: google.maps.MapTypeId.ROADMAP,  
  10. disableDefaultUI: true 
  11. };  
  12. map = newgoogle.maps.Map(document"), myOptions);  
  13. }  
  14. functionFindLocaiton() {  
  15. geocoder = newgoogle.maps.Geocoder();  
  16. InitializeMap();  
  17. varaddress = document.getElementById("addressinput").value;  
  18. geocoder.geocode({ address: address }, function(results, 

　　Reverse Geocoding in C#

　　同样用C#也可以实现Reverse Geocoding操作：

  1. CodestaticstringbaseUri =  
  2. "http://maps.googleapis.com/maps/api/geocode/xml?latlng={0},{1}&sensor=falsestringlocation = string.Empty;  
  3. publicstaticvoidRetrieveFormatedAddress(stringlat, stringlng)  
  4. {  
  5. requestUri = string.Format(baseUri, lat, lng);  
  6. using(WebClient wc = newWebClient())  
  7. {  
  8. stringinxmlElm.Descendants() where  
  9. elm.Name == "status 

　　总结

　　在这篇文章，我尝试将V3版本的Google Maps API中的最基本和最常用的功能解说清楚  。希望这篇文章能帮你顺利完成任务  。然后，API中还有很多我没有讨论到的，我将尝试在今后的文章中来讨论  。当然希望能得到大家的点评和反馈  。

　　源码下载：http://files.cnblogs.com/sxwgf/GMAP.zip

　　原文：http://www.cnblogs.com/jz1108/archive/2011/10/21/2220574.html