写在最前面
早就听说过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的使用方法和一些使用条款:/uploadfile/201301/5/7B145011460.png" />
Google Maps 设置选项
在上面的例子中,我们使用了一个Map类,并设置了一个HTML ID作为参数。现在我们来更深入一点,一起来看看下面的地图选项:
- Codefunctioninitialize() {
- 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.ROADMAP,
- google.maps.MapTypeId.TERRAIN,
- google.maps.MapTypeId.HYBRID,
- google.maps.MapTypeId.SATELLITE]
- },
- navigationControl: true,
- navigationControlOptions:
- {
- style: google.maps.NavigationControlStyle.ZOOM_PAN
- },
- scaleControl: true,
- disableDoubleClickZoom: truefalse,
- streetViewControl: true,
- draggableCursor: ''move''
- };
- varmap = newgoogle.maps.Map(document.getElementById("map"), options);
- }
- window.onload = initialize;
上面的例子中,我们应用了地图的所有属性,你可以根据需要来选择使用它们。
498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' alt="" src="http://images.myeducs.cn/files/uploadimg/20111202/1000583.png" />
Map类的属性说明如下表所示
属性 | 类 | ||||||||||||||
MapTypeControl:true/false | mapTypeControlOptions
| ||||||||||||||
navigationControl:true/false | navigationControlOptions
| ||||||||||||||
scaleControl:true/false | scaleControlOptions : 和navigationControl有一样的属性 (position , style) 方法也一样. | ||||||||||||||
disableDoubleClickZoom: true/false | |||||||||||||||
scrollwheel: true/false | |||||||||||||||
draggable: true/false | |||||||||||||||
streetViewControl: true/false |
Map Maker(地图标记)
M