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

开发 后端
百度地图API接口想必大家都很熟悉了,本文将给大家介绍Google Maps API(V3版本)使用的文章。也是一种开阔思路的文章。

  写在最前面

  早就听说过Google Maps API了,但一直没用过,今天在CodeProject上看到了这篇关于Google Maps API(V3版本)使用的文章,觉得很容易上手,就将他翻译下来了,相信对初学者会有大的帮助。译文允许转载,但请在页面明显处标明以下信息,且保留完整原文链接地址和译文链接地址,谢谢合作!

  英文原文:Google Maps API V3 for ASP.NET

  译文出处:青藤园

  译文作者:王国峰

  译文链接:ASP.NET中使用Google Maps API V3【译】

  简介

  Google Maps为我们提供了一种非常灵活的方式来使用它的地图服务。我们可以在Web应用程序中通过调用Google Maps API来为我们的用户提供方位信息、地理位置信息以及其他类型的东西。尽管已经有很多文章介绍了Google Maps API的使用方法,但这次我要介绍的是最新V3版本的Google Maps API。在这篇文章中,我们将会看到一些使用Google Maps的常见技术。为了能更好的理解下面的示例代码,你需要了解Javascript和C#的基本知识。

  你的第一个Google Maps

  在Google Maps API的早期版本中,我们需要将自己的web应用程序注册至Google,从而获取一个API Key。然而随着新版本的发布,Google Maps的注册机制已经被淘汰了,但是最近Google又提出了一些使用地图的限制,你可以通过下面的链接获取Google Maps API的使用方法和一些使用条款:http://code.google.com/apis/maps/documentation/javascript/usage.html#usage_limits。现在我们就开始在自己的网站下创建一个Google Maps地图示例,下面的一行代码是用来连接Google Maps API服务的:

  1.   <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> 
  2. </script> 

  然后你可以用下面的代码来创建一个简单的地图:

  1.   functionInitializeMap()  
  2.   {  
  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.   varmap = newgoogle.maps.Map(document.getElementById("map"), myOptions);  
  10.   }  
  11.   window.onload = InitializeMap; 

Google Maps 设置选项

  在上面的例子中,我们使用了一个Map类,并设置了一个HTML ID作为参数。现在我们来更深入一点,一起来看看下面的地图选项:

  1. Codefunctioninitialize() {  
  2.   varlatlng = newgoogle.maps.LatLng(-34.397, 150.644);  
  3.   varoptions =  
  4.   {  
  5.   zoom: 3,  
  6.   center: newgoogle.maps.LatLng(37.09, -95.71),  
  7.   mapTypeId: google.maps.MapTypeId.ROADMAP,  
  8.   mapTypeControl: true,  
  9.   mapTypeControlOptions:  
  10.   {  
  11.   style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,  
  12.   poistion: google.maps.ControlPosition.TOP_RIGHT,  
  13.   mapTypeIds: [google.maps.MapTypeId.ROADMAP,  
  14.   google.maps.MapTypeId.TERRAIN,  
  15.   google.maps.MapTypeId.HYBRID,  
  16.   google.maps.MapTypeId.SATELLITE]  
  17.   },  
  18.   navigationControl: true,  
  19.   navigationControlOptions:  
  20.   {  
  21.   style: google.maps.NavigationControlStyle.ZOOM_PAN  
  22.   },  
  23.   scaleControl: true,  
  24.   disableDoubleClickZoom: truefalse,  
  25.   streetViewControl: true,  
  26.   draggableCursor: 'move' 
  27.   };  
  28.   varmap = newgoogle.maps.Map(document.getElementById("map"), options);  
  29.   }  
  30.   window.onload = initialize; 

  上面的例子中,我们应用了地图的所有属性,你可以根据需要来选择使用它们。

Map类的属性说明如下表所示

属性
MapTypeControl:true/false mapTypeControlOptions
属性
style
1
2
3
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

【编辑推荐】

  1. 百度地图API如何批量转换为百度经纬度
  2. 百度地图API如何给自定义覆盖物添加事件
  3. 详解百度地图API之自定义地图类型
  4. 详解百度地图API之地图操作
  5. 百度地图API之如何制作驾车导航
  6. 详解百度地图API之地图标注
责任编辑:彭凡 来源: 博客园
相关推荐

2020-10-27 10:40:18

JavaAPI V3支付

2015-07-21 10:46:43

ASP.NET微软

2009-07-27 17:54:39

WCF服务ASP.NET

2009-07-20 17:59:07

JavaScript调ASP.NET AJA

2009-07-21 09:43:36

调用UpdatePanASP.NET

2013-03-04 14:24:58

Google Maps

2013-02-28 13:35:02

Google Maps

2009-07-24 16:05:05

调用Web ServiASP.NET

2009-08-05 16:59:38

ASP.NET调用Ex

2009-04-01 12:00:43

ASP.NETMVC

2014-06-09 15:29:13

OData v4.0

2010-07-30 13:17:33

NFS V3

2009-07-22 17:45:35

ASP.NET教程

2009-07-28 17:17:19

ASP.NET概述

2009-08-03 14:22:33

什么是ASP.NET

2021-03-12 00:04:52

网关Api

2010-08-16 09:14:37

ASP.NET MVC

2023-11-17 18:17:33

微信支付V3版本

2013-01-08 17:30:31

Google MapsAndroid MapMapFragment

2009-07-27 12:22:03

ASP.NET和ASPASP.NET入门教程
点赞
收藏

51CTO技术栈公众号