google Map APi学习与总结（二）

最新推荐文章于 2020-12-16 00:56:32 发布

冰镇宝贝321

最新推荐文章于 2020-12-16 00:56:32 发布

阅读量3.4k

点赞数

分类专栏： web开发文章标签： google api function html input xhtml

本文链接：https://blog.csdn.net/bzbb321/article/details/7419873

版权

web开发专栏收录该内容

22 篇文章 0 订阅

订阅专栏

闲话不说，接google Map APi学习与总结（一）

这样基本的小查询就实现了，但是说实话，一般很少人去通过经纬度查地址，这个是困难的同时也是不可行了的，大家很快就会想到查国家，查城市呀，于是又重新的修改了

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

    <script src=" http://maps.google.com/maps?file=api&v=2&key=ABQIAAAALcd_q6UiGxcHp3eooJ2W-RQRS5-lso5HIopdvnzabVM14up_SRS1IkL_D0yPIgc-xdkCgecfiLNdfw"
        type="text/javascript">
//My Google Maps Key
    </script>

    <script type="text/javascript">

function load() {
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map"));
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.addControl(new GOverviewMapControl(new GSize(100, 100)));
		var center = new GLatLng(31.298886, 120.585316);
		map.setCenter(center, 14);
		map.setMapType(G_NORMAL_MAP);
		map.enableScrollWheelZoom(); //让地图启用鼠标滚轮
    	map.enableDoubleClickZoom();//让地图启用鼠标双击
    	map.enableContinuousZoom();//让地图启动滑动效果
		geocoder = new GClientGeocoder();		
		var marker = new GMarker(center, {
				draggable : true
			});
		map.addOverlay(marker);
		document.getElementById("lat").value = center.lat();
		document.getElementById("lng").value = center.lng();
		
		geocoder = new GClientGeocoder();
		
		GEvent.addListener(marker, "dragend", function () {
			var point = marker.getPoint();
			map.panTo(point);
			document.getElementById("lat").value = point.lat();
			document.getElementById("lng").value = point.lng();
		});
		
		GEvent.addListener(map, "moveend", function () {
			map.clearOverlays();
			var center = map.getCenter();
			var marker = new GMarker(center, {
					draggable : true
				});
			map.addOverlay(marker);
			document.getElementById("lat").value = center.lat();
			document.getElementById("lng").value = center.lng();
			
			GEvent.addListener(marker, "dragend", function () {
				var point = marker.getPoint();
				map.panTo(point);
				document.getElementById("lat").value = point.lat();
				document.getElementById("lng").value = point.lng();
			});
		});
	}
}

function showAddress(address) {
	var map = new GMap2(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	map.enableScrollWheelZoom(); //让地图启用鼠标滚轮	
	map.enableDoubleClickZoom();//让地图启用鼠标双击
    map.enableContinuousZoom();//让地图启动滑动效果
	if (geocoder) {
		geocoder.getLatLng(address,
			function (point) {
			if (!point) {
				alert(address + " city not found !");
			} else {
				document.getElementById("lat").value = point.lat();
				document.getElementById("lng").value = point.lng();
				map.clearOverlays()
				map.setCenter(point, 6);
				var marker = new GMarker(point, {
						draggable : true
					});
				map.addOverlay(marker);
				
				GEvent.addListener(marker, "dragend", function () {
					var pt = marker.getPoint();
					map.panTo(pt);
					document.getElementById("lat").value = pt.lat();
					document.getElementById("lng").value = pt.lng();
				});
				
				GEvent.addListener(map, "moveend", function () {
					map.clearOverlays();
					var center = map.getCenter();
					var marker = new GMarker(center, {
							draggable : true
						});
					map.addOverlay(marker);
					document.getElementById("lat").value = center.lat();
					document.getElementById("lng").value = center.lng();
					
					GEvent.addListener(marker, "dragend", function () {
						var pt = marker.getPoint();
						map.panTo(pt);
						document.getElementById("lat").value = pt.lat();
						document.getElementById("lng").value = pt.lng();
					});
				});
			}
		});
	}
}
</script>

</head>
<body οnlοad="load()" οnunlοad="GUnload()"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>my google map</title>
	<script type="text/javascript">
		function get_imps() {
			var t = document.getElementsByTagName('html');
			var arr = t[0].innerHTML.match(/redvase\.bravenet\.com\/track\/impression\/[^"' ]+/g)
				lastValue = '';
			result = new Array
				for (var i = 0; i < arr.length; i++) {
					var curValue = arr[i];
					if (curValue != lastValue) {
						result[result.length] = curValue;
					}
					lastValue = curValue;
				}
				return result.join(',').replace(/\//g, '%2F')
		}
		function get_abuse_link() {
			tag = '<a href="http://www.bravenet.com/global/adproblem.php?ads_seen=' + get_imps() + '" style="font: 11px tahoma, sans-serif; color: #004891;" target="_blank">Report Problem Ad</a>'
				o = document.getElementById('abuse-link')
				o.innerHTML = tag
		}
	</script>
</head>

<body>
    <script language="JavaScript">
var message = "";
function clickIE() {
	if (document.all) {
		(message);
		return false;
	}
}
function clickNS(e) {
	if
	(document.layers || (document.getElementById && !document.all)) {
		if (e.which == 2 || e.which == 3) {
			(message);
			return false;
		}
	}
}
if (document.layers) {
	document.captureEvents(Event.MOUSEDOWN);
	document.onmousedown = clickNS;
} else {
	document.onmouseup = clickNS;
	document.oncontextmenu = clickIE;
}
document.oncontextmenu = new Function("return false")
    </script>
        <b>城市名称:</b>
        <form action="#" οnsubmit="showAddress(this.address.value); return false">
            <input type="text" size="34" name="address" value="苏州" />
            <input type="submit" value="查询!" />
        </form>
       最近的坐标: 
            <table bgcolor="#FFFFFF" width="300">
                <tr>
                    <td width="70">
                        <b>纬度:</b></td>
                    <td>
                        <input  type="text" size="34" name="latitude" value="" id="lat" /></td>
                </tr>
                <tr>
                    <td width="70">
                        <b>经度:</b></td>
                    <td>
                        <input  type="text" size="34" name="longitude" value="" id="lng" /></td>
                </tr>
            </table>
            <br>
            <div align="center" id="map" style="width: 100%; height: 600px">
            </div>
</body>
</html>
</body>
</html>

下接

google Map APi学习与总结（三） .

如果转载或使用，希望标明本人地址。

当然我也是问好多人的，可是大家都没给我正确答案，很困惑哦我问了好多人啊。。。。。。。。。。。。。。

冰镇宝贝321

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
google Map APi学习与总结（二）

闲话不说，接google Map APi学习与总结（一）这样基本的小查询就实现了，但是说实话，一般很少人去通过经纬度查地址，这个是困难的同时也是不可行了的，大家很快就会想到查国家，查城市呀，于是又重新的修改了代码如下： <script src=" http://maps.google.com/maps?file=api&v=2&key=ABQIAAAALcd
复制链接

扫一扫