小攻城師的戰場筆記

最近寫了一個用到 Google Map API 的標記叢集 (marker cluster) 的頁面，還沒時間記錄 marker cluster 怎麼用，user 就打來說地圖顯示得怪怪的。看了一下，在 IE8 裡某些落在標記群組之外的單一地圖標記 (marker) 根本不顯示，本來以為是 marker cluster 造成的，但把 marker cluster 註解掉以後，反而發現所有標記都沒產生！

所以就拿「google map api marker ie8」當關鍵字（為了偷懶只查正體中文的XD），一眼就看到第三組搜尋結果《Google Map 的 Marker 在 IE7 + IE8 破圖的解法》是支上上籤，設定地圖標記 (marker) 時該多帶個 optimized 參數：

var marker = new google.maps.Marker({
    map : map,
    position : point,
    optimized: false, // point! 原來就是少寫這行才會出錯！
    icon : 'icon.png'
});

Google Map API 官方文件是這樣描述 "optimized" 這個設定值的：

Optimization renders many markers as a single static element. Optimized rendering is enabled by default. Disable optimized rendering for animated GIFs or PNGs, or when each marker must be rendered as a separate DOM element (advanced usage only).

說實在的我看不懂，所以我就不翻譯了。 XD

但總之這個值 default 是 true，在發現它的好用之處之前，還是都先關掉好了。 :p

--
搜尋過程還找到黑暗執行續的《利用HTML5 Canvas動態產生文字圖示》，可以利用 HTML 5 產生地圖標記的 icon 耶，還可以在裡面塞文字，滿有趣的，先記起來以後有機會來用看看。

--
結果有個問題還是解不了：在 IE8，每一個 grid 的右邊都會會出現直條的灰色區塊。找到這篇 "Google map comes partially, grey area comes instead of images from google server"，但我照著改也沒用。再研究看看了。 Orz

後來的解決方法雖然很爛，但是看起來那些礙眼的灰色區塊因此消失了，所以就姑且用之了。因為灰色區塊在捲動圖資、或是縮放地圖 (zoom-in / zoom-out) 之後就會消失了，所以寫一段小程式讓讓它重新縮放。

function resizeMap(m) {
    // m = map, 前面建立起來的 google map 地圖物件
    x = m.getZoom();
    c = m.getCenter();
    google.maps.event.trigger(m, 'resize');
    m.setZoom(8);  // 先調整成和自己要的倍率不同（比自己要的倍率還要大或小都可以）
    setTimeout('map.setZoom(9)',100);  // 稍稍延遲一點時間再調回原來要的倍率
    m.setCenter(c);
}; 

（setZoom 的倍率可以依實際需要調整，但前後要用不同倍率，地圖的圖片才會改變，如果設一樣的倍率會覺得看起來沒效果。）