google map学习

fenglei12

于 2011-10-21 08:29:35 发布

阅读量155

点赞数

分类专栏： JS area 文章标签： google map js ViewUI

本文链接：https://blog.csdn.net/fenglei12/article/details/84051272

版权

JS area 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本来也没想到要学习下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中已经提供相当的例子，可以通过解读源代码来学习。
[url]http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/[/url]