Google Map API (1)
Posted In:
Google Map
.
By 卡西卡
- 申請 Google Maps API Key
網址：Sign Up for the Google Maps API- 若使用其它人的key會顯示「此網站上使用的Google地圖API機碼已由另一個網站註用。您可以至 http://code.google.com/apis/maps/ 為此網站產生新的機碼。」
- 用 file:///C:/GMap.htm 的方式測試可以不需要申請key。
- 網頁編碼要用 UTF-8
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> - 基本程式 [GMap2]
- 增加功能：
- 滑鼠滾輪拉近拉遠
map.enableScrollWheelZoom(); - 地圖大小、移動控制項
map.addControl(new GLargeMapControl());
map.addControl(new GSmallMapControl()); - 地圖型態控制項（地圖、衛星、混合地圖、地形）
map.addControl(new GMapTypeControl());
map.addMapType(G_PHYSICAL_MAP); //增加地形圖 (參考：GMapType.Constants)
map.setMapType(G_NORMAL_MAP); //設定預設地圖型態 - 地圖型態控制項（下拉式）
map.addControl(new GMenuMapTypeControl()); - 鳥瞰圖
map.addControl(new GOverviewMapControl()); - 比例尺
map.addControl(new GScaleControl());
- 滑鼠滾輪拉近拉遠
- 在地圖上插上標籤
[GLatLng,
GMarker, ]
// 中正紀念堂
var pos = new GLatLng(25.036772,121.520269);
var mark = new GMarker(pos);
map.addOverlay(mark); - 插上自訂標籤
[GIcon,
GMarkerOptions,
GSize,
GPoint, ]
// 自訂標籤
var icon=new GIcon();
icon.image = "mark.gif";
icon.iconSize = new GSize(16,16);
icon.iconAnchor = new GPoint(8,8);
icon.shadow = "mark.gif";
icon.shadowSize = new GSize(1,1);
icon.infoWindowAnchor = new GPoint(8, 8);
icon.infoShadowAnchor = new GPoint(8, 8);
// 中正紀念堂
var pos = new GLatLng(25.036772,121.520269);
var mark = new GMarker(pos, {icon:icon});
map.addOverlay(mark); - 點擊標籤顯示訊息
// 處理mark的click事件
GEvent.addListener(mark, "click", function() {mark.openInfoWindowHtml('中正紀念堂<br>可用HTML'); }); - 程式移動地圖
// 5秒後移至台北火車站
window.setTimeout(function() {
map.panTo(new GLatLng(25.048708,121.516128));
}, 5000);
參考資料：
0 Responses to Google Map API (1)
Something to say?