Google Maps API v3 實用技巧 (一) 地圖設定

Google Maps 大 家 都 知 道 吧 ?不 管 是 桌 面 網 頁 版 ,還 是 手 機 應 用 程 式 ,大 家 都 用 得 不 少 。作 為 program 麻 ,每 次 遇 到 工 作 上 或 者 幫 朋 友 的 網 頁 要 加 入 地 圖 ,筆 者 都 會 使 用 Google Maps。使 用 Google Maps 的 好 處 是 免 費 ,也 不 用 擔 心 版 權 問 題 。

要 在 自 己 的 網 站 加 入 Google Maps,最 簡 單 的 就 是 使 用 Google Maps Javascript API。自 從 到 了 v3,在 功 能 上 、速 度 上 ,都 增 強 不 少 。基 本 的 教 學 ,Google 自 己 的 網 站 就 已 經 非 常 詳 細 ,筆 者 就 不 Copy & Paste 了 ,大 家 可 以 到 Google 的 網 站 去 看 。

Google Maps Developer’s Guide – Getting Started
Google Maps API Reference
Google Maps Code Samples

最 簡 單 最 簡 單 的 Google Maps,首 先 要 引 用 Google Map Api,然 後 在 網 頁 裡 面 要 有 一 個 DIV 供 Google Maps 使 用 ,最 後 就 要 在 你 的 Javascript 之 中 新 增 一 個 Map object。

...
// somewhere in your head
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
...
...
// somewhere in your javascript
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
...
...
// somewhere in you body
<div id="map-canvas"></div>
...

很 多 朋 友 都 不 留 意 ,其 實 Google Maps Api 的 地 圖 是 有 非 常 多 的 地 方 可 以 設 定 的 ,這 可 以 讓 你 在 自 己 的 網 站 上 建 立 獨 一 無 二 的 地 圖 。 筆 者 最 先 會 設 定 的 就 是 地 圖 的 語 言 ,但 這 個 設 定 有 點 特 別 ,不 是 在 Map Options 裡 面 設 定 的 ,而 要 在 引 用 Google Maps API 時 作 為 參 數 加 入 的 。

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&language=zh-TW"></script>

這 裡 就 是 官 方 的 Supported Languages Spreadsheet

然 後 就 是 設 定 那 個 Map Options。Map Options 裡 面 ,除 了 center 和 zoom 是 必 要 的 ,其 他 都 是 選 項 。這 些 選 項 主 要 是 設 定 地 圖 上 的 控 制 項 ,還 有 滑 鼠 的 Cursor。

var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(22.30, 114.16),
    streetViewControl: false,
    scaleControl: true,
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        style: google.maps.ZoomControlStyle.LARGE
    },
    draggableCursor:'crosshair'
    };
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

Google Maps 總 共 有 七 個 控 制 項 ,預 設 會 顯 示 那 幾 個 ,要 依 你 的 平 台 和 屏 幕 大 小 而 定 。
Zoom control
Pan control
MapType control
Scale control
Street View control
Rotate control
Overview Map control

當 然 你 也 可 以 自 己 去 決 定 每 個 控 制 項 要 不 要 顯 示 ( 例 zoomControl: true / false )。

而 每 一 個 控 制 項 ,都 會 有 自 己 的 Control Options。例 如 上 例 中 ,zoom Control 就 可 以 再 設 定 position 和 style。大 家 要 注 意 ,每 個 控 制 項 的 Control Options 都 是 不 一 樣 的 。除 了 內 建 的 控 制 項 ,大 家 還 可 以 自 訂 控 制 項 ,有 興 趣 的 朋 友 可 以 參 考 Google 的 例 子

至 於 滑 鼠 的 Cursor,我 們 可 以 使 用 CSS 的 cursor,就 像 上 例 中 的 crosshair ( 十 字 線 )。大 家 也 可 以 參 考 w3schools.com 的 CSS cursor property。當 然 我 們 也 可 以 使 用 自 己 的 圖 示 ,但 這 時 候 我 們 必 須 要 設 定 至 少 一 個 是 css 的 fallback 圖 示 。

...
draggingCursor: 'url(http://www.example.com/icon.png), auto;',
...

在 地 圖 建 立 好 之 後 ,如 果 想 更 改 Map Options 的 話 ,我 們 可 以 用 setOptions 方 法 。基 本 上 所 有 Map Options 都 可 以 用 setOptions 來 設 定 的 。

var NewOptions = {
    ...
    draggableCursor:'crosshair',
    ...
};
map.setOptions(NewOptions);

又 或 者 只 作 少 量 更 改 的 話 :

map.setOptions({draggableCursor:'crosshair'});

在 Map Options 中 還 有 一 個 獨 立 的 大 項 ,叫 做 Styles。Styles 可 以 改 變 Google Maps 的 外 觀 ( 主 要 是 ROADMAP 的 外 觀 ,SATELLITE 就 只 會 影 響 那 些 Labels )。在 ROADMAP 中 的 各 類 東 西 ,例 如 公 園 、學 校 、高 速 公 路 、大 海 等 等 ,你 都 可 以 在 Styles 之 中 自 訂 顯 不 顯 示 、自 訂 顏 色 、透 明 度 等 等 。這 讓 你 可 以 真 正 自 訂 一 張 獨 一 無 二 的 Google 地 圖 。

Styles 就 一 個 Array,裡 面 可 以 有 一 個 或 者 多 個 MapTypeStyle object。

var stylesArray = [
    {
        "stylers": [
            { "visibility": "off" }
        ]
    },{
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [
            { "visibility": "on" },
            { "color": "#6a7da0" }
        ]
    },{
        "featureType": "landscape",
        "elementType": "geometry",
        "stylers": [
            { "visibility": "on" },
            { "color": "#efebd3" }
        ]
    }
];
map.setOptions({styles: stylesArray});

在 上 例 的 stylesArray 當 中 ,筆 者 在 第 一 個 MapTypeStyle object 把 所 有 東 西 都 設 定 為 不 顯 示 ( 沒 有 featureType 和 elementType 就 是 All 的 意 思 了 )。然 後 在 第 二 個 就 設 定 了 water.geometry ( 就 是 地 圖 上 的 水 ) 的 顏 色 。在 第 三 個 就 landscape.geometry ( 就 是 地 圖 上 的 地 ) 的 顏 色 。結 果 就 是 地 圖 上 只 有 陸 地 和 海 洋 ( 也 有 湖 泊 河 流 ) 兩 樣 東 西 ,所 有 別 的 東 西 例 如 道 路 、建 築 物 之 類 的 東 西 都 沒 有 了 。

那 個 Styles Array 看 起 來 很 複 雜 ,而 裡 面 能 夠 設 定 的 東 西 也 蠻 多 的 ,所 以 Google 就 為 我 們 建 立 了 Google Maps API Styled Map Wizard ( Wizard 在 IE 執 行 時 好 像 會 有 點 問 題 ,大 家 用 Firefox 或 者 Chrome 吧 ),我 們 只 要 輕 輕 鬆 鬆 就 可 以 互 動 地 建 立 好 我 們 自 己 想 要 的 Style 了 。如 果 連 自 己 在 Wizard 動 手 也 不 想 ,網 上 當 然 也 有 千 千 萬 萬 已 經 製 作 好 的 Style 給 大 家 去 下 載 ( 例 如 : snazzymaps.com )。

下 面 就 是 由 上 面 的 例 子 製 作 出 來 的 地 圖 ,是 不 是 跟 平 常 的 Google Map 很 不 一 樣 呢 ?

ctleung張 先 生 ,男 性 ,肖 龍 。
職 業 :I.T. Consultant
簡 介 :不 好 好 讀 書 ;七 尺 差 五 寸 ,手 長 過 膝 ,雙 耳 垂 肩 ;性 寬 和 ,寡 言 語 ,喜 怒 不 形 於 色 。據 說 少 時 曾 斬 白 蛇 於 鳳 凰 山 下 ……


This entry was posted in Computer & Network and tagged , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>