最近寫了一個用到 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 的倍率可以依實際需要調整,但前後要用不同倍率,地圖的圖片才會改變,如果設一樣的倍率會覺得看起來沒效果。)

文章標籤

創作者介紹
創作者 fannys23 的頭像
fannys23

小攻城師的戰場筆記

fannys23 發表在 痞客邦 留言(0) 人氣()