在建設網站中用到地圖是很常見的,在國內大部分都是用百度地圖,但是有時候可能會用到國外地址,這時候就只能使用谷歌地圖了。
方法一、使用框架引入谷歌地圖
用框架引入谷歌地址是最簡單的方法,不是專業開發人員也可以操作。登陸ditu.google.cn地圖,輸入地址信息,如:"上海東方明珠",把地圖移動到合適的視角,點擊分享鏈接后,有兩個信息。第一個是一個網址,用於在瀏覽器中打開的;第二個是一個框架的代碼,網站中通常使用這個代碼。把代碼復制到網站中去就可以了,里面可以自己設定度度,高度,語言等信息。
方法二、使用谷歌地圖api開發
代碼如下:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script
src="http://maps.google.com/maps?file=api&v=2&sensor=true;
key=ABQIAAAAevysxt9O5lBUCrSalm80MxQx8gmx0K-_Fjj4Tf8bNXH3BBSxZRRmI_CuZM2zQyuXEpG_uxt-aqPr-A"
type="text/javascript"></script>
//author:67566894 <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 marker = new GMarker(point);
var html = '<div>'+
'<a >Name:'+ name +'</a><br/>'+
'<a >Address:'+address +'</a><br/>'+
'<a >telephone:'+tel +'</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(39.9000,116.3000); // 設置標記
map.addOverlay(createMarker(point,'beijing','sh','123456'));//加入標記
}
}
</script>
</head>
<body onload="load()">
<div id="map" style="width: 750px; height: 500px"></div>
</body>
</html>
PS:如果有寫錯的地方,歡迎指出,謝謝。
