【问题标题】:google maps toggle markers谷歌地图切换标记
【发布时间】:2013-12-09 23:59:37
【问题描述】:

如果选中复选框,我需要显示标记 如果未选中则隐藏

function initialize() {
    //map
    var UCM = new google.maps.LatLng(37.366572, -120.424876);
    var myOptions = {
        zoom : 13,
        center : UCM,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    //streetview
    var panoramaOptions = {
        position : UCM,
        pov : {
            heading : 0,
            pitch : 0,
            zoom : 0
        }
    };
    var panorama = new google.maps.StreetViewPanorama(document
            .getElementById("pano"), panoramaOptions);
    var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
    map.setStreetView(panorama);
    //bus stops

    var GLaps = new google.maps.LatLng(37.315284, -120.505021);

    var infowindow = new google.maps.InfoWindow(
            {
                content : '<br>GRANVILLE LUXURY APARTMENTS </br>' + '<br><b><FONT COLOR="#0000FF">C1 BLUE LINE</FONT></b>:(AM) 6:45, 8:05, 9:25, 10:45; (PM)12:05, 1:25, 2:45, 4:05, 5:25, 6:45, 8:05</br>' + '<br><b><FONT COLOR="cccc00">C1 GOLD LINE</FONT></b>: (AM) 7:25, 8:45, 10:05, 11:25; (PM) 12:45, 2:05, 3:25, 4:45, 6:05, 7:25, 8:45, 10:05</br>'
            });
    var marker = new google.maps.Marker( {
        position : GLaps,
        draggable : false,
        map : map,
        title : 'Granville Luxury Apartments Departure Times',
        clickable : true
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
    });
}

【问题讨论】:

  • 请使用代码格式化工具!
  • 修正了代码格式,但我仍然不确定问题是什么。

标签: google-maps checkbox toggle google-maps-markers


【解决方案1】:

你可以使用一些 jquery。下面的添加/隐藏谷歌脚本只是为了得到一个想法,我认为它不起作用。

$("#mycheckbox").click(function(){
    if ($(this).is(":checked")){
       //add marker
        marker = new google.maps.Marker({
              position: location,
              map: map
          });
    }
    else{
        //hide
        marker.setMap(null);
    }
});

【讨论】:

    猜你喜欢
    • 2014-05-25
    • 2015-10-22
    • 1970-01-01
    • 2014-12-10
    • 2017-10-30
    • 2014-08-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多