摘要：一個(gè)小項(xiàng)目要使用作為主要展示方式，在地圖上展示世界某發(fā)展現(xiàn)狀。完成了，跟默認(rèn)的方法其實(shí)一模一樣自定義因?yàn)槭褂昧俗赃m應(yīng)布局，發(fā)現(xiàn)定位坐標(biāo)也有點(diǎn)難，用普通的方法使用一個(gè)展示，時(shí)抓坐標(biāo)，周圍偏移個(gè)展示。最后使用了自定義方法來用模擬，效果不錯(cuò)。

一個(gè)小項(xiàng)目要使用google map作為主要展示方式，在地圖上展示世界某發(fā)展現(xiàn)狀。雖然原來使用過google map，但還是花了兩天時(shí)間才將主要的地圖功能開發(fā)完成，這里記錄一下，自用，高手請不要拍磚。

js實(shí)現(xiàn)的gist地址：https://gist.github.com/jy00295005/11077920

google給了default的大頭針作為marker，也可以改成其他的圖片，但是我的需求是需要同時(shí)展示兩種marker：
1. 不同顏色大小的圓球、圓球中顯示數(shù)字
2. 使用大頭針marker展示機(jī)構(gòu)

圓球與數(shù)字
沒有美工，我找了google的cluster marker圖片

使用不同的圖片作為marker很簡單，只要在定義marker時(shí)給google api地址就ok

icon: helper.map.config.pin_icon_url 

但是在marker上加數(shù)字花了一點(diǎn)時(shí)間google，自己寫好像還不是很簡單，最后使用的方法是用一個(gè)包markerwithlabel.js

新建marker是不再使用原來google默認(rèn)的方法 google.maps.Marker()，而采用MarkerWithLabel()，構(gòu)建方法和默認(rèn)一模一樣，就是可以多傳些label的參數(shù)上去。

var marker_country = new MarkerWithLabel({
    position: new google.maps.LatLng(_country_data.lat, _country_data.long),
    map: _map,
    country: _country_data.country,
    icon : icon_val.icon_url,
    draggable: false,
    raiseOnDrag: ture,
    labelContent: ""+_country_data.value,
    labelAnchor: new google.maps.Point(icon_val.xIndex, icon_val.yIndex),
    labelClass: "mapIconLabel", // the CSS class for the label
    labelInBackground: false
});

ok 完成了，跟默認(rèn)的方法其實(shí)一模一樣

因?yàn)槭褂昧俗赃m應(yīng)布局，發(fā)現(xiàn)定位tooltips x、y坐標(biāo)也有點(diǎn)難，用普通的方法：使用一個(gè)hidden tooltip div展示tooltip，mouseover marker時(shí)抓坐標(biāo)，周圍偏移10個(gè)px展示tooltip div。但是因?yàn)槭褂昧俗赃m應(yīng)的div布局，每次用戶改變?yōu)g覽器窗口時(shí)坐標(biāo)會(huì)改變，如果要檢測用戶窗體大小重新計(jì)算顯然不是很好的解決方案。

最后使用了google 自定義infoWindow方法來用infoWindow模擬tooltips，效果不錯(cuò)。還是用了一個(gè)包infobox.js

//新的infoWindow tooltipOptions
tooltipOptions : {
    content : document.getElementById("infobox"),
    disableAutoPan: false,
    maxWidth: 150,
    pixelOffset: new google.maps.Size(-70, 0),
    zIndex: null,
    boxStyle: {
        "background": "#f0ad4e",
        "opacity": 0.75,
        "width": "100px",
        "border-style": "solid",
        "border-width": "1px",
        "border-color": "#646464",
        "border-radius": "3px 3px 3px 3px"
},
    closeBoxMargin: "12px 4px 2px 2px",
    closeBoxURL: "",//空就沒有關(guān)閉的叉叉了
infoBoxClearance: new google.maps.Size(1, 1)
}

//聲明infoWindow tooltip
var infoWindow_tooltip = new InfoBox(helper.map.config.tooltipOptions);

//在監(jiān)聽事件中使用
google.maps.event.addListener(marker_country, "mouseover", function (e) {
     _infoWindow_tooltip.setContent("
" + marker_country.country + "
");
    _infoWindow_tooltip.open(_map, marker_country);
});

google.maps.event.addListener(marker_country, "mouseout", function () {
    _infoWindow_tooltip.close();
});

滑動(dòng)按鈕展示/隱藏第二種marker

show

hide

使用angularJS實(shí)現(xiàn)很簡單
html 按鈕

angular methods

//初始化的時(shí)候多帶帶繪制inst_markers
var inst_markers = helper.map.create_country_OA_maker(
    s.map, 
    infoWindow, 
    infoWindow_tooltip, 
    false, 
    inistutes_data
);


//點(diǎn)擊toggle按鈕時(shí)根據(jù)survey_show判斷是畫還是不畫inst_markers
s.pick_survey = function (survey_show) {
    if (survey_show) {
        inst_markers = helper.map.create_country_OA_maker(
            s.map, 
            infoWindow, 
            infoWindow_tooltip, 
            false,
            inistutes_data
        );

    } else{
        helper.map.destroyMarker(
            inst_markers.institute_markers
        );

        inst_markers = helper.map.create_country_OA_maker(
            s.map, 
            infoWindow, 
            infoWindow_tooltip, 
            false,
            false
        );
    };
}

參考下面回單中給的幾個(gè)網(wǎng)址
http://segmentfault.com/q/1010000000450074

js實(shí)現(xiàn)的gist地址：https://gist.github.com/jy00295005/11077920

開發(fā)就一個(gè)人，沒有美工沒有設(shè)計(jì)，界面土沒辦法