成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

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

DTeam / 3534人閱讀

摘要：一個(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)，周?chē)苽€(gè)展示。最后使用了自定義方法來(lái)用模擬，效果不錯(cuò)。

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

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

自定義 map marker

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

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

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

icon: helper.map.config.pin_icon_url

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

新建marker是不再使用原來(lái)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í)一模一樣

自定義marker tooltips

因?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)，周?chē)?0個(gè)px展示tooltip div。但是因?yàn)槭褂昧俗赃m應(yīng)的div布局，每次用戶(hù)改變?yōu)g覽器窗口時(shí)坐標(biāo)會(huì)改變，如果要檢測(cè)用戶(hù)窗體大小重新計(jì)算顯然不是很好的解決方案。

最后使用了google 自定義infoWindow方法來(lái)用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: "",//空就沒(méi)有關(guān)閉的叉叉了
infoBoxClearance: new google.maps.Size(1, 1)
}

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

//在監(jiān)聽(tīng)事件中使用
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

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

show

hide

使用angularJS實(shí)現(xiàn)很簡(jiǎ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判斷是畫(huà)還是不畫(huà)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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/78058.html

相關(guān)文章

  • Plain——使用同一套代碼創(chuàng)建你的 web 地圖應(yīng)用

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

    loonggg 評(píng)論0 收藏0

  • 石家莊生育健康服務(wù)平臺(tái)項(xiàng)目

    摘要：生育健康平臺(tái)算是我做過(guò)的比較完整，也比較大的一個(gè)項(xiàng)目了。首先，主要做的還是寫(xiě)前臺(tái)，因?yàn)楹笈_(tái)我們這里用原來(lái)的項(xiàng)目的接口即可。孕前保健孕期保健兒童保健生殖健康就是通過(guò)在標(biāo)簽下放好類(lèi)，然后在點(diǎn)擊時(shí)切換類(lèi)然后調(diào)接口拼接頁(yè)面想要的內(nèi)容。 生育健康平臺(tái)算是我做過(guò)的比較完整，也比較大的一個(gè)項(xiàng)目了。現(xiàn)在想記錄一下，總結(jié)一下做的過(guò)程，遇到的難點(diǎn)。 首先，主要做的還是寫(xiě)前臺(tái)，因?yàn)楹笈_(tái)我們這里用原來(lái)的項(xiàng)目...

    springDevBird 評(píng)論0 收藏0

  • 石家莊生育健康服務(wù)平臺(tái)項(xiàng)目

    摘要：生育健康平臺(tái)算是我做過(guò)的比較完整，也比較大的一個(gè)項(xiàng)目了。首先，主要做的還是寫(xiě)前臺(tái)，因?yàn)楹笈_(tái)我們這里用原來(lái)的項(xiàng)目的接口即可。孕前保健孕期保健兒童保健生殖健康就是通過(guò)在標(biāo)簽下放好類(lèi)，然后在點(diǎn)擊時(shí)切換類(lèi)然后調(diào)接口拼接頁(yè)面想要的內(nèi)容。 生育健康平臺(tái)算是我做過(guò)的比較完整，也比較大的一個(gè)項(xiàng)目了?，F(xiàn)在想記錄一下，總結(jié)一下做的過(guò)程，遇到的難點(diǎn)。 首先，主要做的還是寫(xiě)前臺(tái)，因?yàn)楹笈_(tái)我們這里用原來(lái)的項(xiàng)目...

    MAX_zuo 評(píng)論0 收藏0

  • 深入理解JavaScript系列10:S.O.L.I.D五大原則之依賴(lài)倒置原則

    摘要：前言本章我們要講解的是五大原則語(yǔ)言實(shí)現(xiàn)的第篇，依賴(lài)倒置原則。當(dāng)應(yīng)用依賴(lài)倒置原則的時(shí)候，關(guān)系就反過(guò)來(lái)了。在當(dāng)靜態(tài)類(lèi)型語(yǔ)言的上下文里討論依賴(lài)倒置原則的時(shí)候，耦合的概念包括語(yǔ)義和物理兩種。依賴(lài)倒置原則和依賴(lài)注入都是關(guān)注依賴(lài)，并且都是用于反轉(zhuǎn)。 前言 本章我們要講解的是S.O.L.I.D五大原則JavaScript語(yǔ)言實(shí)現(xiàn)的第5篇，依賴(lài)倒置原則LSP（The Dependency Invers...

    chenjiang3 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<