google map 示例

iteye_17604

于 2011-03-17 16:03:49 发布

阅读量259

点赞数

分类专栏： google map 文章标签： Google HTML

本文链接：https://blog.csdn.net/iteye_17604/article/details/82034627

版权

google map 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

google map api 图档示例
中文api[url]http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/v2/reference.html[/url]
英文api[url]http://www.codechina.org/doc/google/gmapapi/#Map_Movement_and_Animation[/url]
google map 类参考
[url]http://www.codechina.org/doc/google/gmapapi/reference.html[/url]
一些google map 应用示例：
[color=red]标点并连线[/color]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google 地图 JavaScript API 示例</title>
    <script src="http://ditu.google.com/maps?file=api&v=2"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
	var latlngs = new Array();
    function load() {
      if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map"));
		map.setCenter(new GLatLng(31.31120672873441,120.62533378601074), 15);
		map.setUIToDefault();
		GEvent.addListener(map, 'click', function(overlay, point) {
			if (overlay) {
			// nothing
			} else {
			//清除以前所点击图标
			//map.clearOverlays();
			document.getElementById("jingwei").value = point.y + "," + point.x;
			latlngs.push(new GLatLng(point.y,point.x));
			var polyline = new GPolyline(latlngs);  
			map.addOverlay(polyline);
			//var marker = map.addOverlay(new GMarker(point));
			}
		});        
      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 1000px; height: 600px"></div>
	<input name="officename" type="text" id="jingwei"  />
  </body>
</html>

[color=red]两点标线[/color]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google 地图 JavaScript API 示例</title>
    <script src="http://ditu.google.com/maps?file=api&v=2"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
		map.enableScrollWheelZoom(); //滚轮控制
        map.setCenter(new GLatLng(31.31120672873441,120.62533378601074), 18); 

		var polyline = new GPolyline([
			new GLatLng(31.31120672873441,120.62533378601074),
			new GLatLng(31.31277414586595,120.62507629394531),
			new GLatLng(31.312581657447687,120.62403559684753),
			new GLatLng(31.311610043237113,120.62417507171631),
			new GLatLng(31.31147254985066,120.6237781047821),
			new GLatLng(31.31120672873441,120.62335968017578),
			new GLatLng(31.310830911393477,120.62345623970032),],"#0da51f",8
		);  
		map.addOverlay(polyline);


      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 1000px; height: 700px"></div>
  </body>
</html>

[color=red]移动取经纬度[/color]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google 地图 JavaScript API 示例</title>
    <script src="http://ditu.google.com/maps?file=api&v=2"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map"));
		map.setCenter(new GLatLng(31.31120672873441,120.62533378601074), 15);
		map.setUIToDefault();
		GEvent.addListener(map, 'click', function(overlay, point) {
			if (overlay) {
			// nothing
			} else {
			//清除以前所点击图标
			map.clearOverlays();
			document.getElementById("jingwei").value = point.y + "," + point.x;
			var marker = map.addOverlay(new GMarker(point));
			}
		});        
      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 1000px; height: 600px"></div>
	<input name="officename" type="text" id="jingwei"  />
  </body>
</html>

[color=red]绘制多边形[/color]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google 地图 JavaScript API 示例</title>
    <script src="http://ditu.google.com/maps?file=api&v=2"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

	var map;  

	 var infoWindow;  
	 function initialize() {  
	   var myLatLng = new GLatLng(31.305541810759557,120.62215805053711);
	   map = new GMap2(document.getElementById("map_canvas"));  
	   map.setCenter(myLatLng, 13);
	   map.setUIToDefault();
	   var points = []; 
	   points.push(new GLatLng(31.332231777990522,120.6405258178711)); 
	   points.push(new GLatLng(31.34747979074232,120.62232971191406)); 
	   points.push(new GLatLng(31.34220191213246,120.58370590209961)); 
	   points.push(new GLatLng(31.31844779444928,120.55435180664062)); 
	   points.push(new GLatLng(31.28441911455992,120.56447982788086)); 
	   points.push(new GLatLng(31.303635095080096,120.58490753173828)); 
	   points.push(new GLatLng(31.276496883214108,120.59864044189453)); 
	   points.push(new GLatLng(31.279431120567526,120.6192398071289)); 
	   points.push(new GLatLng(31.269160890477653,120.62971115112304)); 
	   points.push(new GLatLng(31.273122397409256,120.65134048461914)); 
	   points.push(new GLatLng(31.306861822087118,120.66850662231445)); 
	   points.push(new GLatLng(31.332231777990522,120.6405258178711)); 
	   map.addOverlay(new GPolygon(points,'#990000',3,0.5,'#6699FF',0.5)); 
	 }  
    //]]>
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 1000px; height: 700px"></div>
  </body>
</html>

[color=red]随机划线[/color]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google 地图 JavaScript API 示例</title>
    <script src="http://ditu.google.com/maps?file=api&v=2"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

	var map;  

	var infoWindow;  
	function initialize() {  
		var myLatLng = new GLatLng(31.305541810759557,120.62215805053711);
		map = new GMap2(document.getElementById("map_canvas"));  
		map.setCenter(new GLatLng(25.036772,121.520269), 12); 
		var bounds = map.getBounds(); 
		var southWest = bounds.getSouthWest(); // 返回矩形西南角的點 
		var northEast = bounds.getNorthEast(); // 返回矩形東北角的點
		var lngSpan = northEast.lng() - southWest.lng(); 
		var latSpan = northEast.lat() - southWest.lat(); 
		var points = []; 
		//乱数取点 
		for (var i = 0; i < 20; i++){ 
			var point = new GLatLng(
				southWest.lat() + latSpan * Math.random(), 
				southWest.lng() + lngSpan * Math.random());
			points.push(point); 
			map.addOverlay(new GMarker(point)); 
		} // for 
		// 排序
		points.sort(function(p1, p2) { return p1.lng() - p2.lng();});
		// 划线 
		map.addOverlay(new GPolyline(points)); 
	 }  
    //]]>
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 1000px; height: 700px"></div>
  </body>
</html>