登 录
简单的显示地图：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"<br /> xmlns:v="urn:schemas-microsoft-com:vml"><br /> <head><br /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /><br /> <title>Google 地图 JavaScript API 示例: 地图标记</title><br /> <mce:script<br /> src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"<br /> type="text/javascript"></mce:script><br /> <mce:script type="text/javascript"><!--</p> <p> function initialize() {<br /> if (GBrowserIsCompatible()) {<br /> var Gmap = new GMap2(document.getElementById("google_map"));<br /> var Glatlng = new GLatLng(36.841979367953016, 118.0594326423645);<br /> Gmap.setCenter(Glatlng, 14);<br /> var Gmarker = new GMarker(Glatlng);<br /> GEvent.addListener(Gmarker, "click", function() {<br /> var gHtml = "<b>地址：</b><br/>柳泉路 假日花园";<br /> Gmap.openInfoWindowHtml(Glatlng, gHtml);<br /> });<br /> Gmap.addOverlay(Gmarker);<br /> }<br /> }<br /> // --></mce:script><br /> </head><br /> <body onload="initialize()" onunload="GUnload()"><br /> <div id="google_map" style="width: 500px; height: 300px"></div><br /> </body><br /> </html>
根据输入地址显示地图：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"><br /> <head><br /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/><br /> <title>Google Maps API Example: Simple Geocoding</title><br /> <mce:script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" mce_src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></mce:script><br /> <mce:script type="text/javascript"><!--<br /> var map = null;<br /> var geocoder = null;</p> <p> function initialize() {<br /> if (GBrowserIsCompatible()) {<br /> map = new GMap2(document.getElementById("map_canvas"));<br /> map.setCenter(new GLatLng(37.4419, -122.1419), 13);<br /> geocoder = new GClientGeocoder();<br /> }<br /> }</p> <p> function showAddress(address) {<br /> if (geocoder) {<br /> geocoder.getLatLng(<br /> address,<br /> function(point) {<br /> if (!point) {<br /> alert(address + " not found");<br /> } else {<br /> map.setCenter(point, 13);<br /> var marker = new GMarker(point);<br /> map.addOverlay(marker);<br /> marker.openInfoWindowHtml(address);<br /> }<br /> }<br /> );<br /> }<br /> }</p> <p>// --></mce:script><br /> </head></p> <p><body onload="initialize()" onunload="GUnload()"><br /> <form action="#" onsubmit="showAddress(this.address.value); return false"><br /> <p><br /> <input type="text" size="60" name="address" value="1600 Amphitheatre Pky, Mountain View, CA" /><br /> <input type="submit" value="Go!" /><br /> </p><br /> <div id="map_canvas" style="width: 500px; height: 300px"></div><br /> </form><br /> </body><br /> </html>
一个可以参考的网站：http://www.js8.in/ 文章：http://www.js8.in/564.html
抱歉!评论已关闭.