Пожалуйста, попробуйте этот короткий пример, который я использую в OpenLayers, библиотеке карт JavaScript для опытных программистов.
<html>
<head>
<title>My OpenLayers: Google Layer</title>
<link rel="shortcut icon" href="http://www.gis.com.my/logo.ico" type="image/x-icon"/>
<link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css" />
<!-- this gmaps key generated for http://localhost:8080/geoserver/ -->
<script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAl9RMqSzhPUXAfeBCXOussRTQDbvAygy0cfGJr8dEMAYKf3RWNBQqP9mjKIsqTfmAlz5LOJ3Xpy5s4w'></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var map;
function init() {
// Create the map object
map = new OpenLayers.Map('map');
// Create a Google layer
var gmap = new OpenLayers.Layer.Google(
"Google Streets", // the default
{numZoomLevels: 20}
);
// Add layer to map
map.addLayer(gmap);
// Zoom to Kuala Lumpur, Malaysia
map.setCenter(new OpenLayers.LonLat(101.686855,3.139003), 13);
}
</script>
</head>
<body onload="init()">
<h1 id="title">My OpenLayers: Google Layer</h1>
<div id="map" style='width: 700px; height: 700px'></div>
</body>
</html>
Обратите внимание, что google-maps-v3 вынужден быть в центре. Как вы можете видеть в следующих кодах, которые я сделал:
map.setCenter(new OpenLayers.LonLat(101.686855,3.139003), 13);
LonLat находится в Куала-Лумпуре. Имейте в виду, что он полностью отличается от вашего географического предмета в школьные годы, поскольку долгота является координатой X. и широта является координатой Y. Пожалуйста, обратитесь к принципу декартовой координации.
Удачи.
С уважением,
zearth