代码如下:
<!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>演示10</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 latlng = new google.maps.LatLng(22.95, 113.4); /* 广州市番禺区,分别为纬度和经度 */
/**
* The HomeControl adds a control to the map that simply
* returns the user to Chicago. This constructor takes
* the control DIV as an argument.
*/
function HomeControl(controlDiv, map)
{
// 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 controlUI = document.createElement('DIV');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = '点击返回到最初的位置';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior
var controlText = document.createElement('DIV');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home</b>';
controlUI.appendChild(controlText);
// Setup the click event listeners: simply set the map to
// Chicago
google.maps.event.addDomListener(controlUI, 'click', function()
{
map.setCenter(latlng);
map.setZoom(12);
});
}
function initialize()
{
var myOptions = {
zoom: 12, /* zoom 的取值范围为:0-19,表示范围最广,19表示范围最小但同时最详细 */
center: latlng,
mapTypeControlOptions:
{
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.SMALL /* 已最简单的形式显示缩放滚动条 */
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(homeControlDiv, map);
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>
效果图如下:
谢谢浏览!