欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

google map学习 博客分类: JS area google mapjs 

程序员文章站 2024-02-14 11:38:28
...
本来也没想到要学习下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 js