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

DTeam 發布于2019-08-19 14:40 / 3463人閱讀

摘要：一個小項目要使用作為主要展示方式，在地圖上展示世界某發展現狀。完成了，跟默認的方法其實一模一樣自定義因為使用了自適應布局，發現定位坐標也有點難，用普通的方法使用一個展示，時抓坐標，周圍偏移個展示。最后使用了自定義方法來用模擬，效果不錯。

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

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

自定義 map marker

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

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

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

icon: helper.map.config.pin_icon_url

但是在marker上加數字花了一點時間google，自己寫好像還不是很簡單，最后使用的方法是用一個包markerwithlabel.js

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

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 自定義infoWindow方法來用infoWindow模擬tooltips，效果不錯。還是用了一個包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: "",//空就沒有關閉的叉叉了
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("" + marker_country.country + "");
    _infoWindow_tooltip.open(_map, marker_country);
});

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

toggle switch

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

show

hide

使用angularJS實現很簡單
html 按鈕

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
        );
    };
}

自定義map style

參考下面回單中給的幾個網址
http://segmentfault.com/q/1010000000450074

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

開發就一個人，沒有美工沒有設計，界面土沒辦法

云服務器 GPU云服務器百度地圖map_marker google-maps 在jsp中定義map map()

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78058.html

Plain——使用同一套代碼創建你的 web 地圖應用

摘要：簡體中文特性如何使用安裝使用安裝，你也可以在頁面中引入構建后的文件。順便校正下地圖窗口接下來我們要取消事件監聽點擊此處查看更多示例 showImg(https://segmentfault.com/img/bVbuafN?w=200&h=200); 使用同一套代碼創建你的 web 地圖應用。 ? https://github.com/XingzheFE/... English | 簡體...

loonggg 2019-08-23 18:14 評論0 收藏0
石家莊生育健康服務平臺項目

摘要：生育健康平臺算是我做過的比較完整，也比較大的一個項目了。首先，主要做的還是寫前臺，因為后臺我們這里用原來的項目的接口即可。孕前保健孕期保健兒童保健生殖健康就是通過在標簽下放好類，然后在點擊時切換類然后調接口拼接頁面想要的內容。生育健康平臺算是我做過的比較完整，也比較大的一個項目了。現在想記錄一下，總結一下做的過程，遇到的難點。首先，主要做的還是寫前臺，因為后臺我們這里用原來的項目...

springDevBird 2019-08-30 15:44 評論0 收藏0
石家莊生育健康服務平臺項目

摘要：生育健康平臺算是我做過的比較完整，也比較大的一個項目了。首先，主要做的還是寫前臺，因為后臺我們這里用原來的項目的接口即可。孕前保健孕期保健兒童保健生殖健康就是通過在標簽下放好類，然后在點擊時切換類然后調接口拼接頁面想要的內容。生育健康平臺算是我做過的比較完整，也比較大的一個項目了。現在想記錄一下，總結一下做的過程，遇到的難點。首先，主要做的還是寫前臺，因為后臺我們這里用原來的項目...

MAX_zuo 2019-08-26 10:35 評論0 收藏0
深入理解JavaScript系列10:S.O.L.I.D五大原則之依賴倒置原則

摘要：前言本章我們要講解的是五大原則語言實現的第篇，依賴倒置原則。當應用依賴倒置原則的時候，關系就反過來了。在當靜態類型語言的上下文里討論依賴倒置原則的時候，耦合的概念包括語義和物理兩種。依賴倒置原則和依賴注入都是關注依賴，并且都是用于反轉。前言本章我們要講解的是S.O.L.I.D五大原則JavaScript語言實現的第5篇，依賴倒置原則LSP（The Dependency Invers...

chenjiang3 2019-08-19 17:22 評論0 收藏0