自定義google map marker、tooltips、toggle switch、map style

時間 2019-11-08

標籤自定義 google map marker tooltips toggle switch style 欄目 Google 简体版

原文原文鏈接

一個小項目要使用google map做爲主要展現方式，在地圖上展現世界某發展示狀。雖然原來使用過google map，但仍是花了兩天時間纔將主要的地圖功能開發完成，這裏記錄一下，自用，高手請不要拍磚。html

js實現的gist地址：https://gist.github.com/jy00295005/11077920git

自定義 map marker

google給了default的大頭針做爲marker，也能夠改爲其餘的圖片，可是個人需求是須要同時展現兩種marker：
1. 不一樣顏色大小的圓球、圓球中顯示數字
2. 使用大頭針marker展現機構github

圓球與數字
沒有美工，我找了google的cluster marker圖片
segmentfault

使用不一樣的圖片做爲marker很簡單，只要在定義marker時給google api地址就okapi

icon: helper.map.config.pin_icon_url

可是在marker上加數字花了一點時間google，本身寫好像還不是很簡單，最後使用的方法是用一個包markerwithlabel.js瀏覽器

新建marker是再也不使用原來google默認的方法 google.maps.Marker()，而採用MarkerWithLabel()，構建方法和默認如出一轍，就是能夠多傳些label的參數上去。ide

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 完成了，跟默認的方法其實如出一轍
佈局

自定義marker tooltips

由於使用了自適應佈局，發現定位tooltips x、y座標也有點難，用普通的方法：使用一個hidden tooltip div展現tooltip，mouseover marker時抓座標，周圍偏移10個px展現tooltip div。可是由於使用了自適應的div佈局，每次用戶改變瀏覽器窗口時座標會改變，若是要檢測用戶窗體大小從新計算顯然不是很好的解決方案。google

最後使用了google 自定義infoWindow方法來用infoWindow模擬tooltips，效果不錯。仍是用了一個包infobox.jsurl

//新的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: "",//空就沒有關閉的叉叉了
infoBoxClearance: new google.maps.Size(1, 1)
}

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

//在監聽事件中使用
google.maps.event.addListener(marker_country, 'mouseover', function (e) {
     _infoWindow_tooltip.setContent('<p>' + marker_country.country + '</p>');
    _infoWindow_tooltip.open(_map, marker_country);
});

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

toggle switch

滑動按鈕展現/隱藏第二種marker

show

hide

使用angularJS實現很簡單
html 按鈕

<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked 
    ng-init="survey_show = true" 
    ng-click="
        survey_show = !survey_show;
        pick_survey(survey_show)
    "
>

angular methods

//初始化的時候單獨繪製inst_markers
var inst_markers = helper.map.create_country_OA_maker(
    s.map, 
    infoWindow, 
    infoWindow_tooltip, 
    false, 
    inistutes_data
);


//點擊toggle按鈕時根據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
        );
    };
}