`
ponlya
  • 浏览: 164332 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

GoogleMap V3

    博客分类:
  • maps
 
阅读更多

GoogleMap API V3

https://developers.google.com/maps/documentation/javascript/reference?hl=zh-CN

 

Hello Map

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map From Google API</title> 
    <meta charset="utf-8">
    <style>
	/**如不指定系统会将其大小假定为 0x0 像素*/
	#map-canvas {
		width:300px;
		height:600px;
	}
    </style>
	<!--加载 Google Maps JavaScript API-->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	<script>
		var map;
		function initialize() {
			//Map options 对象来包含地图初始化变量
			var mapOptions = {
				zoom: 8,	//分辨率 	缩放 0 相当于地球地图可缩小的最低级别	分辨率较高,覆盖的区域则较小
				center: new google.maps.LatLng(-34.397, 150.644), //地图中心	创建 LatLng 对象   	按 {纬度,经度} 的顺序传递位置的坐标,以存储该位置
				mapTypeId: google.maps.MapTypeId.ROADMAP
				/**
					ROADMAP,用于显示 Google 地图的默认、普通 2D 图块。
					SATELLITE,用于显示拍摄的图块。
					HYBRID,用于同时显示拍摄的图块和重要地图项(道路、城市名)的图块图层。
					TERRAIN,用于显示自然地形图块,其中包含海拔和水体地图项(山脉、河流等)。
				*/
			};
			map = new google.maps.Map(document.getElementById('map-canvas'),
			mapOptions);
		}

		google.maps.event.addDomListener(window, 'load', initialize);

	</script>
  </head>
  <body>
	<!--存储地图-->
    <div id="map-canvas"></div>
  </body>
</html>

 以武汉为中心

var mapOptions = {
	zoom: 7,
	center: new google.maps.LatLng(30.51667,114.31667), //-34.397, 150.644	114.31667,30.51667
	mapTypeId: google.maps.MapTypeId.TERRAIN
};

 

 版本类型
    发行版本,可使用 v=3 或省略 v 参数来指定。
    实验版本,可使用 v=3.exp 来指定。该版本是以主干版本为基础的当前版本,其中包含公开发布的所有错误修复和新增地图项。
    编号版本,用 v=3.number 表示,指定了 API 的地图项集。
http://maps.googleapis.com/maps/api/js?v=3.9&sensor=true_or_false
    版本 3.9 参考(发行)
    版本 3.10 参考(实验)
    版本 3.8 参考(冻结)
    版本 3.0 到 3.7 都已停用。
区域本地化
    region 参数添加到 <script> 标记中,以覆盖该默认行为。英国的 ccTLD 为“uk”(与其域名 .co.uk 相对应),而其区域标识符则为“GB”。还不是很懂,没有看到明显效果
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&region=GB">

事件
    MVC 对象通常都包含状态。只要更改了对象的属性,API 就会触发已更改该属性的事件。
    如:当地图的缩放级别更改后,API 将会触发地图上的 zoom_changed 事件。您也可以在 event 命名空间方法中注册 addListener() 事件处理程序,以拦截这些状态更改。

 

无法修改用户界面元素(如版权和 Google 徽标)的位置

 启用45度图像

map.setTilt(45);
map.setHeading(90);   旋转45度图像

Maps API 需要将世界位置转换为地图(屏幕)上的位置时,都需要先将纬度和经度值转换为“世界”坐标。此转换过程使用地图投影来完成。为此,Google Maps 使用墨卡托投影您也可以定义自己的投影以实现 google.maps.Projection 接口。

 

墨卡托投影在经度方向上的宽度有限,但在纬度方向上的高度无限。

 

Google Maps API 可能无法加载最有用的较高缩放级别的所有地图图像;而是会将每个缩放级别的图像都分割为一组地图图块,这些图块逻辑上按照应用能识别的顺序排列。当地图滚 动到新位置或新的缩放级别时,Maps API 会使用像素坐标确定所需的图块,然后将这些值转换为一组要检索的图块。这些图块坐标采用逻辑上易于确定哪些图块包含任何给定点的图像的方案进行分配。

 

Google 地图中的图块从与像素原点相同的位置进行编号。

 

自定义地图类型必须实现 MapType 接口

 

地球是一个三维球体(近似说法),而地图是二维平面。您在 Google Maps API 内看到的地图与其他的地球平面地图一样,都是地球在平面上的投影。简单而言,投影可定义为纬度/经度值在投影地图的坐标上的映射。

 

 动态修改 mapTypeId:
    map.setMapTypeId(google.maps.MapTypeId.TERRAIN);

 

 

分享到:
评论

相关推荐

    GoogleMap V3 中文 教程

    Google Map V3是Google Maps API的一个重要版本,主要针对Web开发,提供了一整套用于在网页中集成地图、定位、路线规划等功能的工具。这个中文教程可以帮助开发者理解和运用V3版本的API,即便在无法访问互联网的情况...

    google map v3离线地图资源包

    在IT行业中,Google Map V3是Google Maps API的第三大主要版本,专为Web开发者设计,用于在网页上集成和自定义地图功能。这个“google map v3离线地图资源包”显然提供了一种方法,使得用户能够在没有互联网连接的...

    Google Map V3 开发手册

    Google Map V3 开放手册 开放文档 里面包含了 Map类 方法 属性 是咧

    Google Map V3 API

    **Google Map V3 API**是谷歌提供的一种用于在网页中集成地图功能的接口,它允许开发者利用JavaScript语言创建交互式的地图应用。这个API是Google Maps API的第三个主要版本,提供了更多的功能、更好的性能以及更...

    wpf google map v3 示例

    **WPF Google Map V3 示例详解** 在Windows Presentation Foundation(WPF)开发中,集成Google Maps API可以帮助我们创建丰富的地理信息系统应用。本示例重点介绍了如何在WPF项目中使用Google Maps API V3,实现...

    Google Map v3 官方实例

    综上所述,"Google Map v3 官方实例"中的内容涵盖了地图集成、交互设计、地理信息处理等多个方面,对于任何希望在网站或应用中集成地图功能的开发者而言,都是极其宝贵的参考资料。通过学习和实践这些实例,开发者...

    GoogleMap V3 样式

    **GoogleMap V3 样式详解** 在Web开发中,Google Maps API V3是一个强大的工具,它允许开发者在网页上嵌入交互式的地图,并进行高度自定义。本篇将深入探讨如何利用Google Maps API V3来创建和管理地图的样式,以...

    google map v3 经纬度转换成详细地址

    根据经纬度转换成详细地址。由于google map v2 已申请不了key 了, 更换成v3, 代码也需要更换成v3代码。2013-10-30上传。

    googleMap V3 中文API

    谷歌地图JavaScript API V3是谷歌提供的用于在网页中嵌入交互式地图的服务。这个API允许开发者通过JavaScript编程语言创建各种地图应用,包括自定义标记、信息窗口、路线规划、地理编码、以及各种地图样式和控件。V3...

    google map v3,V3地图搜素,V3地图标注

    在本文中,我们将深入探讨Google Maps API的第三版(V3),主要关注V3地图搜索、地图标注以及多点标注的实现。Google Maps API V3是Google提供的一个强大的JavaScript库,用于在网页上嵌入交互式地图,进行地理位置...

    google map v3 demo 数据库动态案例 php的

    谷歌地图API V3是一个强大的工具,用于在网页上集成交互式地图功能。在这个案例中,我们将探讨如何使用PHP和MySQL数据库与谷歌地图V3 API进行动态交互,实现用户点击地图后添加标记,并将这些标记信息存储到数据库中...

    谷歌MAP_V3中文详解以及一个简单例子

    谷歌地图API V3是Google提供的一套用于在网页上嵌入地图、进行地理位置处理的JavaScript接口。这个API允许开发者在自己的网站上创建交互式地图,包括但不限于定位、标记、信息窗口、路线规划等功能。本教程将对谷歌...

    Google Map V3版 根据KeyDragZoom制作DragZoomControl

    本篇我们将深入探讨如何在Google Maps V3中利用KeyDragZoom插件创建自定义的DragZoomControl。 首先,KeyDragZoom是一个非常实用的插件,它扩展了Google Maps的基本功能,允许用户通过按住键盘上的某个键(通常是...

    Google Map V3

    google-maps-utility-library-v3 http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries

    google map jsv3 示例

    在IT行业中,Google Maps JavaScript API V3(简称jsv3)是开发人员广泛使用的工具,用于集成地图功能到Web应用程序中。这个API提供了丰富的功能,包括地图显示、标记定位、路径绘制、地理编码、信息窗口等。下面...

    Javascript计算两个marker之间的距离(Google Map V3)

    在使用Google Map V3进行地图开发的过程中,常常需要对地图上的marker点进行操作和交互。marker点作为地图上的标记物,通常用于表示特定的位置。计算两个marker点之间的距离是地图应用中的一项常见需求,它可以帮助...

    谷歌地图Google Map API V3中文开发文档

    谷歌地图 Google Map API V3 中文开发文档 谷歌地图 Google Map API V3 中文开发文档是 Google 公司提供的一种基于 Web 的地图应用程序接口,允许开发者在自己的网站或应用程序中嵌入谷歌地图,以提供地图检索、...

    google map api v3源码

    由于这个压缩包名为"WebMap",里面可能包含了一个简单的web应用,展示如何使用谷歌地图API V3来创建一个网页地图。开发者可以通过分析和学习这个源码,了解上述知识点的实际应用,并进一步扩展自己的地图应用开发...

    GoogleMapV3:让 Google Map V3 API 在 Visualforce 上显示帐户信息的简单代码

    让 Google Map V3 API 在 Visualforce 上显示帐户信息的简单代码 Read full blog post here at : http://www.oyecode.com/2015/01/how-to-add-google-map-in-salesforce.html Pin-Drop 动画脚本: marker = new ...

Global site tag (gtag.js) - Google Analytics