`
Javaloverlover
  • 浏览: 347038 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

google map学习

阅读更多
本来也没想到要学习下google map,由于项目需要,所以简单学习了下google map。
首先要加载google maps api,不然一切无从谈起,
<script type="text/javascript" src="http://maps/api/js?sensor=false"></script>
必须要设置 sensor 参数,以指明此应用程序是否使用传感器确定用户的位置。
然后编写地图函数,在进行加载。
simple map:
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
	var map;
	var marker;
	var infowindow;
	function initialize() {
		var latlng = new google.maps.LatLng(30.33,120.23);
		var myOption = {
			zoom:8,
			center:latlng,
			mapTypeId:google.maps.MapTypeId.ROADMAP
		};
		map = new google.maps.Map(document.getElementById('myMap'), myOption);
	}
</script>
</head>
<body onload="initialize()">
	<div id="myMap" style="width:600px;height:400px"></div>
</body>
</html>

也可以通过js事件加载:google.maps.event.addDomListener(window, 'load', initialize);
latlng对象是经纬度,mapTypeId有多种,具体google的挨批中有,一般主要使用ROADMAP。map就是地图对象,zoom参数指定显示地图的详细程度。
还可以为地图添加标记,信息窗口,事件等。
simple marker map:
<html>
<head>

<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(30.3, 120.2);
    var myOptions = {
      zoom: 15,
      center: latlng,
	  disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	var markerOption = {
		position:latlng,
		map:map,
		title:"good"
	}
	var marker = new google.maps.Marker(markerOption);
	google.maps.event.addListener(marker, 'click', function() {
		if(map.getZoom() == 15) {
			map.setZoom(10);
		}else {
			map.setZoom(15);
		}
	});
	google.maps.event.addListener(map, 'click', function(event) {
		placeMarker(event.latLng, map);
	});
	function placeMarker(position, map) {
		var marker = new google.maps.Marker({
			position:position,
			map:map
		});
		map.panTo(position);
	}
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

此代码可以在地图上任意添加marker。
simple window info map:
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
	var map;
	var marker;
	var infowindow;
	function initialize() {
		var latlng = new google.maps.LatLng(30.33,120.23);
		var myOption = {
			zoom:8,
			center:latlng,
			mapTypeId:google.maps.MapTypeId.ROADMAP
		};
		map = new google.maps.Map(document.getElementById('myMap'), myOption);
		marker = new google.maps.Marker({
			position:latlng,
			map:map
		});
		var content = "good";
		infowindow = new google.maps.InfoWindow({
			content:content,
		});
	}
	google.maps.event.addDomListener(window, 'load', initialize);
	function hide() {
		var cmd = document.getElementById("show").value;
		if(cmd == "hide") {
			infowindow.close();
			document.getElementById("show").value = "show";
		}else {
			infowindow.open(map, marker);
			document.getElementById("show").value = "hide";
		}
	}
</script>
</head>
<body onload="initialize()">
	<div id="myMap" style="width:600px;height:400px"></div>
	<div><input type="button" onclick="hide()" value="show" id="show"/></div>
</body>
</html>

此代码点击按钮可以显示marker上边的info window,也可以隐藏。
标记也可以通过自定义。
其实对于google map的学习,google maps api中已经提供相当的例子,可以通过解读源代码来学习。
http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/
分享到:
评论

相关推荐

    Google MAP 学习例程

    **Google MAP 学习例程** Google Map API 是一套强大的工具,它允许开发者在自己的网站或应用程序中嵌入交互式的地图功能。这个“Google MAP 学习例程”旨在帮助你深入理解和掌握Google Map V3 API,从而能够利用它...

    google map api 学习笔记

    **谷歌地图API学习笔记** 谷歌地图API(Google Maps API)是一种强大的工具,允许...通过阅读《google map学习文档.doc》,可以深入学习这些概念并实践应用,逐步掌握谷歌地图API的使用,构建功能丰富的地图应用。

    GoogleMap谷歌地图demo

    在IT行业中,GoogleMap是一个广泛使用的地图服务,它提供了丰富的API接口,允许开发者在其应用...开发者可以通过学习和分析这个demo,掌握如何在自己的项目中有效利用GoogleMap API,提升地图应用的用户体验和功能性。

    google map api学习

    通过学习谷歌地图API,你可以创建定制的地图,添加标记、路径、信息窗口,甚至进行复杂的地理编码和路线规划。下面将详细介绍谷歌地图API的一些关键知识点。 首先,你需要在Google Developers Console中注册一个...

    google map应用实例

    在IT领域,Google Map是一款广泛使用的在线地图服务,它提供了丰富的功能,如定位、导航、路线规划、街景查看等。本应用实例将探讨如何利用Google Map API在离线环境中实现地图服务,这对于那些网络不稳定或者需要在...

    Ext Google Map 简易开发框架

    开发者可以解压后研究其结构,学习如何将ExtJs和Google Maps API结合使用,从而提升自己的地图应用开发能力。总的来说,Ext Google Map简易开发框架为开发者提供了一个高效、灵活的工具,用于构建具有高级功能的交互...

    Google Map API 使用示例

    Google Map API 是一款强大的工具...通过学习和实践这些示例,你可以熟练掌握 Google Map API 的基础和高级功能,从而在各种项目中灵活应用。记住,始终要关注 API 的使用限制和最佳实践,以确保服务的稳定性和高效性。

    google map v2 Demo

    public void onMapReady(GoogleMap googleMap) { // 在这里,你可以对地图进行各种定制,如添加标记、路径等 GoogleMap map = googleMap; map.getUiSettings().setZoomControlsEnabled(true); map....

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

    var map = new google.maps.Map(document.getElementById('map'), { zoom: 8, center: myLatLng }); } ``` 这段代码会在ID为`map`的`div`元素内显示一个中心位于澳大利亚悉尼的地图,缩放级别为8。 谷歌地图API...

    基于Google Map API的简单地图

    总的来说,"基于Google Map API的简单地图"项目涵盖了定位用户、地图操作和标记地点等基本功能,通过学习和实践,开发者可以构建出更加丰富和交互性强的地图应用。Google Map API的强大和灵活性使其成为开发地图应用...

    google-map.zip_谷歌地图

    public void onMapReady(GoogleMap googleMap) { // 在这里可以进行地图操作,比如设置初始位置、添加标记等 } }); ``` 在`onMapReady`回调中,你可以访问到GoogleMap对象,从而调用各种方法来定制地图,如设置...

    android google map 应用

    在Android布局文件中添加MapView组件,通过设置API密钥和初始化GoogleMap对象,可以实现在应用中展示地图。同时,可以通过调整Zoom级别来控制地图的缩放程度,使用CameraPosition和CameraUpdateFactory来改变视图...

    同google map的geoserver用sld

    同google map的geoserver用sld geoserver用的,可以拿来学习,也可以直接使用,覆盖掉原先的geoserver自带的sld就可以了 画出来的效果不错的说o(∩_∩)o...

    google map api开发源代码

    Google Map API是一个...通过学习和分析这个源代码,开发者不仅可以了解Google Map API的基础用法,还能掌握高级特性和最佳实践。源代码中的注释和示例将有助于快速理解各个功能的实现,从而在自己的项目中灵活应用。

    GoogleMap地图控件应用源码_googlemapcontrol.zip

    这个描述简洁明了,表明了源码是关于GoogleMap地图控件的实现,可能是用某种编程语言(如Java、JavaScript、C#等)编写,目的是帮助开发者理解和学习如何在实际项目中应用。源码通常包括了地图的加载、标记设置、...

    轨迹记录 android google map 应用

    4. **地图初始化**:在Activity或Fragment中创建GoogleMap对象,通过setMapType、setMyLocationEnabled等方法设置地图样式和显示用户位置。 5. **轨迹记录**:使用LocationManager和LocationListener监听位置变化,...

    googlemap 地图功能

    var map = new google.maps.Map(document.getElementById('map'), { center: location, zoom: 8 }); } ``` 在上述代码中,我们创建了一个新的地图对象,并将其放置在ID为`map`的HTML元素内,设置了中心位置为...

    google-Map.zip_android_android google map_android map_google map

    public void onMapReady(GoogleMap googleMap) { // 这里可以进一步配置地图,比如设置缩放级别、启用定位等 } }); ``` 不忘在其他生命周期方法(如onResume(), onPause(), onDestroy())中调用对应的方法。 ...

    get_google_map_1.4.zip

    "matlab"指明了编程语言,"algorithm"暗示了该程序包可能包含用于处理地图数据的算法,而"googlemap"和"map"则直接指出其与谷歌地图和地图操作相关。 在压缩包中,有两个文件:“license.txt”和“get_google_map”...

    GoogleMap API + ASP.NET(C#)

    在IT行业中,Google Map API 和 ASP.NET(C#)的结合应用是构建地理位置服务的重要技术组合。Google Map API 提供了丰富的地图展示和地理定位功能,而ASP.NET(C#)则是一个强大的Web应用程序开发框架,两者结合可以创建...

Global site tag (gtag.js) - Google Analytics