代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>演示14</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100%; }
body { height: 100%; margin: 0px; padding: 0px; }
#map_canvas { width:50%; height: 50%; margin: 50px auto; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&key=ABQIAAAAtzdEfkm0e6fFv-EqYY-XJRQdNSJsfUEFgMWL1fb2TrZ8t0A2pRQ10wAqRsmxpdHzRsHswMJAFavZ6g"></script>
<!-- sensor 参数表示是否检测用户的地理位置 -->
<script type="text/javascript">
var map;
var chicago = new google.maps.LatLng(22.95, 113.4);
/**
* The HomeControl adds a control to the map that
* returns the user to the control's defined home.
*/
// Define a property to hold the Home state
HomeControl.prototype.home_ = null;
// Define setters and getters for this property
HomeControl.prototype.getHome = function()
{
return this.home_;
}
HomeControl.prototype.setHome = function(home)
{
this.home_ = home;
}
function HomeControl(controlDiv, map, home)
{
// We set up a variable for this since we're adding
// event listeners later.
var control = this;
// Set the home property upon construction
control.home_ = home;
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
controlDiv.style.padding = '5px';
// Set CSS for the control border
var goHomeUI = document.createElement('DIV');
goHomeUI.style.backgroundColor = 'white';
goHomeUI.style.borderStyle = 'solid';
goHomeUI.style.borderWidth = '2px';
goHomeUI.style.cursor = 'pointer';
goHomeUI.style.textAlign = 'center';
goHomeUI.title = 'Click to set the map to Home';
controlDiv.appendChild(goHomeUI);
// Set CSS for the control interior
var goHomeText = document.createElement('DIV');
goHomeText.style.fontFamily = 'Arial,sans-serif';
goHomeText.style.fontSize = '12px';
goHomeText.style.paddingLeft = '4px';
goHomeText.style.paddingRight = '4px';
goHomeText.innerHTML = '<b>Home</b>';
goHomeUI.appendChild(goHomeText);
// Set CSS for the setHome control border
var setHomeUI = document.createElement('DIV');
setHomeUI.style.backgroundColor = 'white';
setHomeUI.style.borderStyle = 'solid';
setHomeUI.style.borderWidth = '2px';
setHomeUI.style.cursor = 'pointer';
setHomeUI.style.textAlign = 'center';
setHomeUI.title = 'Click to set Home to the current center';
controlDiv.appendChild(setHomeUI);
// Set CSS for the control interior
var setHomeText = document.createElement('DIV');
setHomeText.style.fontFamily = 'Arial,sans-serif';
setHomeText.style.fontSize = '12px';
setHomeText.style.paddingLeft = '4px';
setHomeText.style.paddingRight = '4px';
setHomeText.innerHTML = '<b>Set Home</b>';
setHomeUI.appendChild(setHomeText);
// Setup the click event listener for Home:
// simply set the map to the control's current home property.
google.maps.event.addDomListener(goHomeUI, 'click', function()
{
var currentHome = control.getHome();
map.setCenter(currentHome);
});
// Setup the click event listener for Set Home:
// Set the control's home to the current Map center.
google.maps.event.addDomListener(setHomeUI, 'click', function()
{
var newHome = map.getCenter();
control.setHome(newHome);
});
}
function initialize()
{
var mapDiv = document.getElementById('map_canvas');
var myOptions = {
zoom: 12,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, myOptions);
// Create the DIV to hold the control and
// call the HomeControl() constructor passing
// in this DIV.
var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(homeControlDiv, map, chicago);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}
</script>
</head>
<body οnlοad="initialize()">
<div id="map_canvas">
</div>
</body>
</html>
效果图如下:
谢谢浏览!