网站中显示和使用google地图主要是通过javascript调用google api。首先要根据域名到google官网上申请一个key,地址:
http://code.g...s/signup.html
申请完成后,用你的key代替下面代码的key。
- JavaScript 代码复制内容到剪贴板
-
-
<script src="http://maps.g...5a3_FEg" type="text/javascript"></script>
-
<script src="http://maps.g...5a3_FEg"></script>
在页面中可以用一个div来显示:
- XML/HTML 代码复制内容到剪贴板
-
-
<div id="map" style="height:450px;width:99%;border:solid 1px #00000;display:none"></div> <br>
下面是加载地图的代码:
- JavaScript 代码复制内容到剪贴板
-
-
<script type="text/javascript">
-
-
function showAddress(address) {
-
document.getElementById("map").style.display="";
-
if (GBrowserIsCompatible()) {
-
var map = new GMap2(document.getElementById("map"));
-
map.addControl(new GSmallMapControl());
-
map.addControl(new GMapTypeControl());
-
map.enableScrollWheelZoom();
-
var geocoder = new GClientGeocoder();
- geocoder.getLatLng(address,
-
function(point) {
-
if (!point) {
-
alert(address + " not found");
-
} else {
- map.setCenter(point, 13);
-
var latln = map.getCenter();
-
var longitude = latln.lng();
-
var latitude = latln.lat();
-
var marker = new GMarker(point);
- map.addOverlay(marker);
-
marker.openInfoWindowHtml("地址:" + address + "<p> </p>" + "经度:"
-
+ longitude + " 纬度:" + latitude);
- }
- }
- );
- }
- }
- </script>
- </head>
如果要创建标记内容以及标记的鼠标事件,可以用下面的代码:
- JavaScript 代码复制内容到剪贴板
-
- <script>
-
function createMarker(point, address, name, qq) {
-
var marker = new GMarker(point);
-
var html = '<div>'+
-
'<a >姓名:'+ name +'</a><br/>'+
-
'<a >地址:'+ address +'</a><br/>'+
-
'<a >QQ:'+ qq +'</a>'+
-
'</div>';
-
GEvent.addListener(marker, "mouseover", function() {
- marker.openInfoWindowHtml(html);
- });
-
GEvent.addListener(marker, "mouseout", function() {
- marker.closeInfoWindow();
- });
-
GEvent.addListener(marker, "click", function() {
- map.setCenter(point, 12);
- });
-
return marker;
- }
-
var point = new GLatLng(23.25675,133.33338);
-
map.addOverlay(createMarker(point,'广州市天河区天河路','小林','452655443'));
-
- }
- </script>
本文转自06peng 51CTO博客,原文链接:http://blog.51cto.com/06peng/962519,如需转载请自行联系原作者