ASP.NET教程之ASP.NET中利用Google Maps API V3仓酷云
我觉得这个学习方法很重要。初学者应该跟我一样有同样一个毛病。那就是急于求成。很想就自己做出个小小的系统来。可真要动手，却又茫然而不知所措。为什么会这样呢？因为我们没有耐心去学习基础知识。写根本看不到什么效果的测试代码。写在最后面早就传闻过GoogleMapsAPI了，但一向没用过，明天在CodeProject上看到了这篇关于GoogleMapsAPI（V3版本）利用的文章，以为很简单上手，就将他翻译上去了，信任对初学者会有年夜的匡助。译文同意转载，但请在页面分明处标明以下信息，且保存完全原文链接地点和译文链接地点，感谢互助！
简介
GoogleMaps为我们供应了一种十分天真的体例来利用它的舆图服务。我们能够在Web使用程序中经由过程挪用GoogleMapsAPI来为我们的用户供应方位信息、地舆地位信息和其他范例的工具。只管已有良多文章先容了GoogleMapsAPI的利用办法，但此次我要先容的是最新V3版本的GoogleMapsAPI。在这篇文章中，我们将会看到一些利用GoogleMaps的罕见手艺。为了能更好的了解上面的示例代码，你必要懂得Javascript和C#的基础常识。
你的第一个GoogleMaps
在GoogleMapsAPI的初期版本中，我们必要将本人的web使用程序注册至Google，从而猎取一个APIKey。但是跟着新版本的公布，GoogleMaps的注册机制已被减少了，可是比来Google又提出了一些利用舆图的限定，你能够经由过程上面的链接猎取GoogleMapsAPI的利用办法和一些利用条目：http://code.google.com/apis/maps/documentation/javascript/usage.html#usage_limits。如今我们就入手下手在本人的网站下创立一个GoogleMaps舆图示例，上面的一行代码是用来毗连GoogleMapsAPI服务的：
12<scripttype="text/javascript"src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>然后你能够用上面的代码来创立一个复杂的舆图：
1234567891011functionInitializeMap(){varlatlng=newgoogle.maps.LatLng(-34.397,150.644);varmyOptions={zoom:8,center:latlng,mapTypeId:google.maps.MapTypeId.ROADMAP};varmap=newgoogle.maps.Map(document.getElementById("map"),myOptions);}window.onload=InitializeMap;
GoogleMaps设置选项
在下面的例子中，我们利用了一个Map类，并设置了一个HTMLID作为参数。如今我们来更深切一点，一同来看看上面的舆图选项：
12345678910111213141516171819202122232425262728293031functioninitialize(){varlatlng=newgoogle.maps.LatLng(-34.397,150.644);varoptions={zoom:3,center:newgoogle.maps.LatLng(37.09,-95.71),mapTypeId:google.maps.MapTypeId.ROADMAP,mapTypeControl:true,mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,poistion:google.maps.ControlPosition.TOP_RIGHT,mapTypeIds:google.maps.MapTypeId.TERRAIN,google.maps.MapTypeId.HYBRID,google.maps.MapTypeId.SATELLITE]},navigationControl:true,navigationControlOptions:{style:google.maps.NavigationControlStyle.ZOOM_PAN},scaleControl:true,disableDoubleClickZoom:true,draggable:false,streetViewControl:true,draggableCursor:move};varmap=newgoogle.maps.Map(document.getElementById("map"),options);}window.onload=initialize;下面的例子中，我们使用了舆图的一切属性，你能够依据必要来选择利用它们。
Map类的属性申明以下表所示
属性类MapTypeControl:true/falsemapTypeControlOptions属性值style123DEFAULTHORIZONTAL_BARDROPDOWN_MENUposition12345678BOTTOMBOTTOM_LEFTBOTTOM_RIGHTLEFTRIGHTTOPTOP_LEFTTOP_RIGHTmapTypeIds1234ROADMAPSATELLITEHybridTerrainnavigationControl:true/falsenavigationControlOptions属性值Position12345678BOTTOMBOTTOM_LEFTBOTTOM_RIGHTLEFTRIGHTTOPTOP_LEFTTOP_RIGHTTstyle123DEFAULTSMALLANDROIDscaleControl:true/falsescaleControlOptions:和navigationControl有一样的属性(position,style)办法也一样.disableDoubleClickZoom:true/false
scrollwheel:true/false
draggable:true/false
streetViewControl:true/false
MapMaker（舆图标志）
Maker类供应了如许一个选项，为用户指定的地位显现一个标志，在我们的使用中舆图标志是非常经常使用的，上面的代码将告知人人怎样创立一个复杂的舆图标志：
12345678varmarker=newgoogle.maps.Marker({position:newgoogle.maps.LatLng(-34.397,150.644),map:map,title:Clickme});
InfoWindow（信息窗口）
我们已在舆图上某个地位加了标志，也为标志增加onclick了事务，点击能够弹出一个窗口来显现该地址的具体信息。我们能够依照上面的代码来创立信息窗口：
123456789varinfowindow=newgoogle.maps.InfoWindow({content:Locationinfo:CountryName:LatLng:});google.maps.event.addListener(marker,click,function(){//翻开窗口infowindow.open(map,marker);});将它们分离起来的代码以下：
12345678910111213141516171819202122232425262728varmap;functioninitialize(){varlatlng=newgoogle.maps.LatLng(-34.397,150.644);varmyOptions={zoom:8,center:latlng,mapTypeId:google.maps.MapTypeId.ROADMAP};map=newgoogle.maps.Map(document.getElementById("map"),myOptions);varmarker=newgoogle.maps.Marker({position:newgoogle.maps.LatLng(-34.397,150.644),map:map,title:Clickme});varinfowindow=newgoogle.maps.InfoWindow({content:Locationinfo:CountryName:LatLng:});google.maps.event.addListener(marker,click,function(){//CallingtheopenmethodoftheinfoWindowinfowindow.open(map,marker);});}window.onload=initialize;使用下面的代码，我们将会在页面上创立一张舆图，然后定位用户地点的地区，在这个地区加上标志，而且弹出一个显现地位信息的窗口。
MultipleMakers（多标志）
有些时分，我们能够要在舆图上处置多个标志，那末我们就能够用上面代码来完成：
123456789101112131415161718192021222324252627282930313233functionmarkicons(){InitializeMap();varltlng=[];ltlng.push(newgoogle.maps.LatLng(40.756,-73.986));ltlng.push(newgoogle.maps.LatLng(37.775,-122.419));ltlng.push(newgoogle.maps.LatLng(47.620,-122.347));ltlng.push(newgoogle.maps.LatLng(-22.933,-43.184));for(vari=0;i<=ltlng.length;i++){marker=newgoogle.maps.Marker({map:map,position:ltlng});(function(i,marker){google.maps.event.addListener(marker,click,function(){if(!infowindow){infowindow=newgoogle.maps.InfoWindow();}infowindow.setContent("Message"+i);infowindow.open(map,marker);});})(i,marker);}}
线路申明
一个最有效的特征之一是GoogleMapsAPI能够为任何指定的地位供应具体的线路申明，完成代码以下：
1234567891011121314151617181920212223242526272829303132333435363738394041424344vardirectionsDisplay;vardirectionsService=newgoogle.maps.DirectionsService();functionInitializeMap(){directionsDisplay=newgoogle.maps.DirectionsRenderer();varlatlng=newgoogle.maps.LatLng(-34.397,150.644);varmyOptions={zoom:8,center:latlng,mapTypeId:google.maps.MapTypeId.ROADMAP};varmap=newgoogle.maps.Map(document.getElementById("map"),myOptions);directionsDisplay.setMap(map);directionsDisplay.setPanel(document.getElementById(directionpanel));varcontrol=document.getElementById(control);control.style.display=block;}functioncalcRoute(){varstart=document.getElementById(startvalue).value;varend=document.getElementById(endvalue).value;varrequest={origin:start,destination:end,travelMode:google.maps.DirectionsTravelMode.DRIVING};directionsService.route(request,function(response,status){if(status==google.maps.DirectionsStatus.OK){directionsDisplay.setDirections(response);}});}functionButton1_onclick(){calcRoute();}window.onload=InitializeMap;
Layers
GoogleMapsAPI为你供应了多层的选项，个中有一个是自行车层。经由过程自行车层，能够为一些出格的地位显现自行车线路。上面的代码是让你在舆图上增加自行车层：
12345678910111213varmapfunctionInitializeMap(){varlatlng=newgoogle.maps.LatLng(-34.397,150.644);varmyOptions={zoom:8,center:latlng,mapTypeId:google.maps.MapTypeId.ROADMAP};map=newgoogle.maps.Map(document.getElementById("map"),myOptions);}window.onload=InitializeMap;varbikeLayer=newgoogle.maps.BicyclingLayer();bikeLayer.setMap(map);Geocoding
到今朝为止，我们已进修创立Google舆图的基础头脑，同时也进修了怎样显现地位相干的信息。上面我们来看看用户是怎样来盘算地位的，Geocoding能够盘算出指定地区的经度和纬度，上面的代码就告知你怎样使用API盘算某个地位的经度和纬度的：
12345678910111213geocoder.geocode({address:address},function(results,status){if(status==google.maps.GeocoderStatus.OK){map.setCenter(results.geometry.location);varmarker=newgoogle.maps.Marker({map:map,position:results.geometry.location});}else{alert("Geocodewasnotsuccessfulforthefollowingreason:"+status);}});GeocodingC#
一样我们能够使用C#代码来盘算地位：
1234567891011121314151617181920212223242526272829303132publicstaticCoordinateGetCoordinates(stringregion){using(varclient=newWebClient()){stringuri="http://maps.google.com/maps/geo?q="+region+"&output=csv&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1"+"-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA";string[]geocodeInfo=client.DownloadString(uri).Split(,);returnnewCoordinate(Convert.ToDouble(geocodeInfo),Convert.ToDouble(geocodeInfo));}}publicstructCoordinate{privatedoublelat;privatedoublelng;publicCoordinate(doublelatitude,doublelongitude){lat=latitude;lng=longitude;}publicdoubleLatitude{get{returnlat;}set{lat=value;}}publicdoubleLongitude{get{returnlng;}set{lng=value;}}}ReverseGeocoding
望文生义，这个是Geocoding的反操纵，我们能够依据经度和纬度来找出该地位的称号。代码以下：
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748varmap;vargeocoder;functionInitializeMap(){varlatlng=newgoogle.maps.LatLng(-34.397,150.644);varmyOptions={zoom:8,center:latlng,mapTypeId:google.maps.MapTypeId.ROADMAP,disableDefaultUI:true};map=newgoogle.maps.Map(document.getElementById("map"),myOptions);}functionFindLocaiton(){geocoder=newgoogle.maps.Geocoder();InitializeMap();varaddress=document.getElementById("addressinput").value;geocoder.geocode({address:address},function(results,status){if(status==google.maps.GeocoderStatus.OK){map.setCenter(results.geometry.location);varmarker=newgoogle.maps.Marker({map:map,position:results.geometry.location});if(results.formatted_address){region=results.formatted_address+;}varinfowindow=newgoogle.maps.InfoWindow({content:Locationinfo:CountryName:+region+LatLng:+results.geometry.location+});google.maps.event.addListener(marker,click,function(){//CallingtheopenmethodoftheinfoWindowinfowindow.open(map,marker);});}else{alert("Geocodewasnotsuccessfulforthefollowingreason:"+status);}});}ReverseGeocodinginC#
一样用C#也能够完成ReverseGeocoding操纵：
1234567891011121314151617181920212223staticstringbaseUri="http://maps.googleapis.com/maps/api/geocode/xml?latlng={0},{1}&sensor=false";stringlocation=string.Empty;publicstaticvoidRetrieveFormatedAddress(stringlat,stringlng){stringrequestUri=string.Format(baseUri,lat,lng);using(WebClientwc=newWebClient()){stringresult=wc.DownloadString(requestUri);varxmlElm=XElement.Parse(result);varstatus=(fromelminxmlElm.Descendants()whereelm.Name=="status"selectelm).FirstOrDefault();if(status.Value.ToLower()=="ok"){varres=(fromelminxmlElm.Descendants()whereelm.Name=="formatted_address"selectelm).FirstOrDefault();requestUri=res.Value;}}}总结
在这篇文章，我实验将V3版本的GoogleMapsAPI中的最基础和最经常使用的功效讲授分明。但愿这篇文章能帮你顺遂完成义务。然后，API中另有良多我没有会商到的，我将实验在从此的文章中来会商。固然但愿能失掉人人的点评和反应。
示例源码下载
net网页编程欺骗了我们那么多年，如今的多核时代，我认为它气数已尽！ ASP是把代码交给VBScript解释器或Jscript解释器来解释，当然速度没有编译过的程序快了。 它可通过内置的组件实现更强大的功能，如使用A-DO可以轻松地访问数据库。 ASP.NET可以无缝地与WYSIWYGHTML编辑器和其他编程工具（包括MicrosoftVisualStudio.NET）一起工作。这不仅使得Web开发更加方便，而且还能提供这些工具必须提供的所有优点，包括开发人员可以用来将服务器控件拖放到Web页的GUI和完全集成的调试支持。微软为ASP.net设计了这样一些策略：易于写出结构清晰的代码、代码易于重用和共享、可用编译类语言编写等等，目的是让程序员更容易开发出Web应用，满足计算向Web转移的战略需要。 代码的可重用性差：由于是面向结构的编程方式，并且混合html，所以可能页面原型修改一点，整个程序都需要修改，更别提代码重用了。 HTML:当然这是网页最基本的语言,每一个服务器语言都需要它的支持,要学习,这个肯定是开始,不说了. 现在主流的网站开发语言无外乎asp、php、asp.net、jsp等。 ASP.Net和ASP的最大区别在于编程思维的转换，而不仅仅在于功能的增强。ASP使用VBS/JS这样的脚本语言混合html来编程，而那些脚本语言属于弱类型、面向结构的编程语言，而非面向对象。 Asp.net：首先来说，Asp.net和Asp没什么关系，看着像是升级版本什么的，其实没什么联系。Asp是脚本编程，用的是ASP语言，而ASP.net用的是C#语言，完全不同的东西。 主流网站开发语言之ASP:ASP是微软（Microsoft）所开发的一种后台脚本语言，它的语法和VisualBASIC类似，可以像SSI（ServerSideInclude）那样把后台脚本代码内嵌到HTML页面中。虽然ASP简单易用，但是它自身存在着许多缺陷，最重要的就是安全性问题。 HTML:当然这是网页最基本的语言,每一个服务器语言都需要它的支持,要学习,这个肯定是开始,不说了. 在一个项目中谁敢保证每天几千万甚至几亿条的数据不丢失?谁敢保证应用的高可靠性？有可以借签的项目吗？ ASP.Net摆脱了以前ASP使用脚本语言来编程的缺点，理论上可以使用任何编程语言包括C++,VB,JS等等，当然，最合适的编程语言还是MS为.NetFrmaework专门推出的C(读csharp)。
页:
[1]