`

Google map 谷歌地图 Google地图 V3 第三版

 
阅读更多
Google Maps Javascript API V3 Reference
https://developers.google.com/maps/documentation/javascript/reference?hl=zh-CN
Google Maps APIhttps://developers.google.com/maps/documentation/javascript/?hl=zh-CN
Flash APIhttps://developers.google.com/maps/documentation/flash/intro?hl=zh-CN
地址解析https://developers.google.com/maps/documentation/javascript/services?hl=zh-CN



<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {
	height: 100%
}
body {
	height: 100%;
	margin: 0px;
	padding: 0px
}
#map_canvas {
	height: 100%
}
</style>
<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
	function initialize() {
		var latlng = new google.maps.LatLng(-34.397, 150.644);
		var myOptions = {
			zoom : 8,
			center : latlng,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(document.getElementById("map_canvas"),
				myOptions);
	}
</script>
</head>
<body onload="initialize()">
	<div id="map_canvas" style="width: 600px; height: 400px;"></div>
</body>
</html>



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
	var geocoder;
	var map;
	//实际查询地址
	var query = "文化路红专路";
	//显示名称
	var display = "<b>单位:</b>郑州大学工学院";
	function initialize() {
		geocoder = new google.maps.Geocoder();
		var myOptions = {
			zoom : 17,//缩放比例
			//地图类型 •MapTypeId.ROADMAP •MapTypeId.SATELLITE 
			//•MapTypeId.HYBRID •MapTypeId.TERRAIN 
			mapTypeId : google.maps.MapTypeId.ROADMAP
		}
		map = new google.maps.Map(document.getElementById("map_canvas"),
				myOptions);
		codeAddress();
	}
	function codeAddress() {
		var address = query;
		//地址解析
		geocoder.geocode({
			'address' : address
		}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				//依据解析的经度纬度设置坐标居中
				map.setCenter(results[0].geometry.location);
				var marker = new google.maps.Marker({
					map : map,
					position : results[0].geometry.location,
					title : address,
					//坐标动画效果
					animation : google.maps.Animation.DROP
				});
				var infowindow = new google.maps.InfoWindow({
					content : "<span style='font-size:11px'><b>地址:</b>"
							+ address + "<br>" + display + "</span>",
					//坐标偏移量,一般不用修改
					pixelOffset : 0,
					position : results[0].geometry.location

				});
				//默认打开信息窗口,点击做伴弹出信息窗口
				infowindow.open(map, marker);
				google.maps.event.addListener(marker, 'click', function() {
					infowindow.open(map, marker);
				});
			} else {
				alert("未能解析该地址的原因: " + status);
			}
		});
	}
</script>
</head>
<body onload="initialize()">
	<div id="map_canvas" style="width: 600px; height: 400px;"></div>
</body>
</html>
分享到:
评论

相关推荐

    google map v3离线地图资源包

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

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

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

    Google Map V3 API

    这个API是Google Maps API的第三个主要版本,提供了更多的功能、更好的性能以及更简洁的语法。离线开发文档确保了开发者在没有网络连接的情况下也能查阅相关资料,提高开发效率。 **核心概念与特性** 1. **初始化...

    谷歌地图v3案例

    ### 谷歌地图v3案例详解 #### 一、背景介绍 谷歌地图API是开发者常用的工具之一,它为网站提供了强大的地图功能。随着技术的发展,谷歌地图API也经历了多个版本的迭代。其中,v2版本曾广泛使用,但随着时间推移,...

    谷歌地图API 第三版

    ### 谷歌地图API 第三版 #### 简介 谷歌地图API第三版是专为移动和Web开发者设计的一套工具集,允许开发者在自己的应用或网站中集成谷歌地图的功能。本版本针对英语理解有限的用户提供了中文文档,以便更广泛的...

    Google Map api V3 (3.9.12)的离线开发包

    Google Map API V3(3.9.12)是谷歌提供的一个用于在网页上嵌入交互式地图的服务,它是Google Maps JavaScript API的第三个主要版本。这个离线开发包允许开发者在没有网络连接的情况下进行地图应用的开发和测试,这...

    google手机地图中文第三版(s60v3)

    google手机地图,从国外google网站上下载的第三版中文版,国内只能下载到第二版,s60V3的

    无密钥google map 第三代

    【标题】"无密钥google map 第三代"指的是在不使用特定API密钥的情况下,采用Google Maps API的第三代版本进行地图应用开发的技术。通常,Google Maps API需要开发者注册并获取API密钥,以便追踪和限制使用量,但...

    Google Map v3 官方实例

    Google Maps API v3是Google Maps JavaScript API的第三个主要版本,它是一个免费的JavaScript库,允许开发者将地图功能无缝地集成到自己的网站或应用中。以下是一些关键知识点: 1. **初始化地图**:在HTML页面中...

    Google Map MarkerCluster使用簡介

    MarkerClusterer.js 是一個第三方 JavaScript 庫,用於實現標記點聚合功能。 在使用 MarkerCluster 時,需要先宣告一個廣域變數 markerCluster,然後在 initMap 函數中創建 MarkerCluster 實例,並將其初始化為一...

    Google Maps JavaScript API V3 详细教程

    API 的第三版相较于第二版进行了更新和优化,提供了更多功能,同时也废弃了一些旧有的接口。在本教程中,我们将深入探讨如何使用这个API来创建和控制地图。 1. **简介** - Google Maps API V3 是一个基于...

    Googlemapv3中文文档及一些示例

    本文将深入探讨"Google Maps API V3",也就是第三版本,以及它与V2的主要区别,并提供一些示例来帮助理解其核心功能和优势。 Google Maps API V3是Google为Web开发人员提供的一套JavaScript库,允许他们将交互式...

    搭建简单的EXT-GWT(GXT)的开发环境(四)ext-gwt(gxt)结合google map第三版开发

    在本篇内容中,我们将探讨如何搭建一个简单的EXT-GWT(GXT)开发环境,并将其与Google Maps API第三版集成。 首先,搭建EXT-GWT开发环境涉及以下步骤: 1. **安装Java Development Kit (JDK)**:EXT-GWT是基于Java...

    Google Maps JavaScript API V3

    Google Maps JavaScript API V3 是一种用于集成交互式地图到网站上的工具。它提供了丰富的功能集,包括地图显示、位置搜索、路线规划等。与之前的版本相比,V3 版本更加灵活且易于扩展,同时也更加强调模块化设计。 ...

    Google_Maps_JavaScript_API_V3

    API的第三版是目前推荐使用的版本,它提供了更强大、更新的功能,同时,第二版已经被官方废弃。 ### 声明HTML5 在示例代码中,`&lt;!DOCTYPE html&gt;`用于声明文档类型为HTML5,确保浏览器以标准模式渲染页面,提供更好...

Global site tag (gtag.js) - Google Analytics