google map 示例
google map api 图档示例
中文api http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/v2/reference.html
英文api http://www.codechina.org/doc/google/gmapapi/#Map_Movement_and_Animation
google map 类参考
http://www.codechina.org/doc/google/gmapapi/reference.html
一些google map 应用示例：
标点并连线
两点标线
移动取经纬度
绘制多边形
随机划线
中文api http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/v2/reference.html
英文api http://www.codechina.org/doc/google/gmapapi/#Map_Movement_and_Animation
google map 类参考
http://www.codechina.org/doc/google/gmapapi/reference.html
一些google map 应用示例：
标点并连线
<!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>
两点标线
<!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>
移动取经纬度
<!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>
绘制多边形
<!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>
随机划线
<!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>