<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>地图检索</title> <script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAaJdpuhdAgNPX4zs0zOvvuhRWqz2PfVo4vXxMlzbThqFCf7cZgRSTbAUBQzazl9qrnS3sz-sTOLHpuA" type="text/javascript"></script> <script language="javascript" type="text/javascript"> function load() { //加载地图 if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); //放大缩小 map.addControl(new GMapTypeControl()); //地图种类 map.enableScrollWheelZoom(); //启用鼠标滚轮 map.setCenter(new GLatLng(39.9000, 116.3000), 6); //地图坐标 三个参数分别为 "纬度" "经度" "比例尺"
function createMarker(point, address,name,tel) { //创建标记内容及标记的鼠标事件 var er = new GMarker(point); var html = '<div>'+ '<a >Name:'+ name +'</a><br/>'+ '<a >Address:'+address +'</a><br/>'+ '<a >telephone:'+tel +'</a>'+ '</div>'; GEvent.addListener(er, "mouseover", function() { er.openInfoWindowHtml(html); }); GEvent.addListener(er, "mouseout", function() { er.closeInfoWindow(); }); GEvent.addListener(er, "click", function() { map.setCenter(point, 12); }); return er; } var point = new GLatLng(39.9000,116.3000); //设置标记 map.addOverlay(createMarker(point,'beijing','sh','123456'));//加入标记 } } </script> </head> <body onload="load()"> 欢迎您,<font color="blue">${user.name}</font> <hr> 目的地: <input type="text" name="endaddress"/> <input type="button" value="搜索"/> <div id="map" style="width: 750px; height: 500px"></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" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps JavaScript API Example: Extraction of Geocoding Data</title> <script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script> <script type="text/javascript"> var map; var geocoder; function initialize() { map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(30.256695,120.17395,true), 14); map.enableScrollWheelZoom();//滑轮缩放 var smallMapControl = new GSmallMapControl(); var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10)); var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10)); map.addControl(smallMapControl, topRight); geocoder = new GClientGeocoder(); } // addAddressToMap() is called when the geocoder returns an // answer. It adds a er to the map with an open info window // showing the nicely formatted version of the address and the country code. function addAddressToMap(response) { map.clearOverlays(); if (!response || response.Status.code != 200) { alert("Sorry, we were unable to geocode that address"); } else { place = response.Place[0]; point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]); map.setCenter(point,14);
// var optionss = new GMarkerOptions; // optionss.title = 'here'; // optionss.icon = G_DEFAULT_ICON ;
er = new GMarker(point);
map.addOverlay(er); er.openInfoWindowHtml(place.address + '<br>' + '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode); GEvent.addListener(er,'click',function(){ er.openInfoWindowHtml(place.address + '<br>' + '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode); }); } } // showLocation() is called when you click on the Search button // in the form. It geocodes the address entered into the form // and adds a er to the map at that location. function showLocation() { var address = document.forms[0].q.value; geocoder.getLocations(address, addAddressToMap); } </script> </head> <body onload="initialize()"> <!-- Creates a simple input box where you can enter an address and a Search button that submits the form. //--> <form action="#" onsubmit="showLocation(); return false;"> <p> <b>Search for an address:</b> <input type="text" name="q" value="" class="address_input" size="40" /> <input type="submit" name="find" value="Search" /> </p> </form> <div id="map_canvas" style="width: 1000px; height: 600px"></div> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>地图检索</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAaJdpuhdAgNPX4zs0zOvvuhRWqz2PfVo4vXxMlzbThqFCf7cZgRSTbAUBQzazl9qrnS3sz-sTOLHpuA" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function load() { //加载地图
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl()); //放大缩小
map.addControl(new GMapTypeControl()); //地图种类
map.enableScrollWheelZoom(); //启用鼠标滚轮
map.setCenter(new GLatLng(39.9000, 116.3000), 6); //地图坐标 三个参数分别为 "纬度" "经度" "比例尺"
function createMarker(point, address,name,tel) { //创建标记内容及标记的鼠标事件
var er = new GMarker(point);
var html = '<div>'+
'<a >Name:'+ name +'</a><br/>'+
'<a >Address:'+address +'</a><br/>'+
'<a >telephone:'+tel +'</a>'+
'</div>';
GEvent.addListener(er, "mouseover", function() {
er.openInfoWindowHtml(html);
});
GEvent.addListener(er, "mouseout", function() {
er.closeInfoWindow();
});
GEvent.addListener(er, "click", function() {
map.setCenter(point, 12);
});
return er;
}
var point = new GLatLng(39.9000,116.3000); //设置标记
map.addOverlay(createMarker(point,'beijing','sh','123456'));//加入标记
}
}
</script>
</head>
<body onload="load()">
欢迎您,<font color="blue">${user.name}</font>
<hr>
目的地: <input type="text" name="endaddress"/> <input type="button" value="搜索"/>
<div id="map" style="width: 750px; height: 500px"></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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API Example: Extraction of Geocoding Data</title>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
type="text/javascript"></script>
<script type="text/javascript"> var map;
var geocoder; function initialize() {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(30.256695,120.17395,true), 14);
map.enableScrollWheelZoom();//滑轮缩放
var smallMapControl = new GSmallMapControl();
var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));
var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));
map.addControl(smallMapControl, topRight);
geocoder = new GClientGeocoder();
} // addAddressToMap() is called when the geocoder returns an
// answer. It adds a er to the map with an open info window
// showing the nicely formatted version of the address and the country code.
function addAddressToMap(response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("Sorry, we were unable to geocode that address");
} else {
place = response.Place[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
map.setCenter(point,14);
// var optionss = new GMarkerOptions;
// optionss.title = 'here';
// optionss.icon = G_DEFAULT_ICON ;
er = new GMarker(point);
map.addOverlay(er);
er.openInfoWindowHtml(place.address + '<br>' + '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
GEvent.addListener(er,'click',function(){
er.openInfoWindowHtml(place.address + '<br>' + '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
});
}
} // showLocation() is called when you click on the Search button
// in the form. It geocodes the address entered into the form
// and adds a er to the map at that location.
function showLocation() {
var address = document.forms[0].q.value;
geocoder.getLocations(address, addAddressToMap);
} </script>
</head> <body onload="initialize()"> <!-- Creates a simple input box where you can enter an address
and a Search button that submits the form. //-->
<form action="#" onsubmit="showLocation(); return false;">
<p>
<b>Search for an address:</b>
<input type="text" name="q" value="" class="address_input" size="40" />
<input type="submit" name="find" value="Search" />
</p>
</form>
<div id="map_canvas" style="width: 1000px; height: 600px"></div>
</body>
</html>