隐藏和显示所有标记

Posted

技术标签:

【中文标题】隐藏和显示所有标记【英文标题】:Hide and Show ALL markers 【发布时间】:2015-10-16 23:50:09 【问题描述】:

我正在构建一个地图,它使用角度来调用并将数据设置到网页和谷歌地图上。

这是我第一个使用 Angular 的大型项目,它几乎可以按照我的设想工作。我想为网站添加额外的功能,使其更加用户友好。

View the working code.

View code on github.

我设置了两个按钮来隐藏或显示所有标记,但我收到错误 clearMarkers、showMarkers 和 allSetMap 未定义。 Onclick,我需要这些按钮才能:

隐藏除信息窗口打开的标记之外的所有标记 显示所有标记 当用户单击“清除方向”按钮、图像顶部栏中的选择之一或隐藏/显示标记按钮时,我还想添加代码以删除折线并将所有标记恢复到原始状态。

非常感谢您提供的任何帮助或指导!代码、建议、方向越简单越好,因为我显然还是个初学者。鼓励分叉。我真的很想学习这个并正确编码。任何指导都非常感谢。

这是数据和地图的html代码:

<!doctype html>
<html ng-app="mapApp" lang="en">
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta charset="utf-8">
<title>Map || Portland Streetcar Bars</title>
<meta name="description" content="Map of Portland's Eastside Streetcar Bars">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory    -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->

<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->

<link rel="stylesheet" href="../../../styles/map-styles.css"> 
<link rel="stylesheet" href="../../styles/mapAppStyles.css">
<link type="text/css" rel="stylesheet" href="../../styles/waitMe.css"><!--  
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> -->  
<script src="../../scripts/lib/modernizr-2.5.3.js"></script>
<script src="../../scripts/modernizr.custom.js"></script>

<script src="//use.typekit.net/kgp0loa.js"></script>
<script>tryTypekit.load();catch(e)</script>
<link rel="icon" 
  type="image/png" 
  href="http://portlandstreetcarbars.com/favicons/favicon.ico">

<!-- endbuild -->
</head>
<body>
<!--[if lt IE 7]>
  <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<!-- Add your site or application content here -->
     <!--  Menu Header  -->
<section class="module parallax parallax-1-inner">
<div class="container">
<header>
  <nav id="dl-menu" class="dl-menuwrapper">
      <button class="dl-trigger">Open Menu</button>
      <ul class="navMenu dl-menu">
        <li><a class="hvr-shutter-out-horizontal" href="/">HOME</a>  </li>
        <li><a class="hvr-shutter-out-horizontal" href="/streetcar-bars-list/">BAR LIST</a></li>
        <li><a class="hvr-shutter-out-horizontal" id="current" href="#">MAP</a></li>
        <li><a class="hvr-shutter-out-horizontal" href="/streetcar-bars-crawls/">CRAWLS</a></li>
        <li><a class="hvr-shutter-out-horizontal" href="/streetcar-bars-join/">CONTACT</a></li>
      </ul>
   </nav>
   <div class="clear"></div>
   <div class="header-inner">Portland<span> Streetcar Bars</span></div>
  <div class="inner-eastside-font-effect"><em>Eastside</em></div>
</header> 
</div>
</section>
<div class="clear"></div>
  <section class="module parallax parallax-2">
    <div class="container">
     <h2>Get Directions to Your Next Stop</h2>
     </div>
</section>  
<div ng-view=""></div> 

<div class="clear"></div>
<section class="module parallax parallax-2">
    <div class="container">
      <h2>Featured Stops on the Portland Streetcar</h2>
     </div>
</section>  


 <!-- build:js(.) scripts/oldieshim.js -->
 <!--[if lt IE 9]>
 <script src="bower_components/es5-shim/es5-shim.js"></script>
 <script src="bower_components/json3/lib/json3.js"></script>
 <![endif]-->
 <!-- endbuild -->
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCdOS0Bctn6co9d2ZaecN-LNrU5yi3eoXQ&sensor=true&libraries=places,drawing,geometry"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <!-- build:js(.) scripts/vendor.js -->
 <!-- bower:js -->
 <script src="bower_components/jquery/dist/jquery.js"></script>
 <script src="bower_components/angular/angular.js"></script>
 <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
 <script src="bower_components/angular-animate/angular-animate.js"></script>
 <script src="bower_components/angular-cookies/angular-cookies.js"></script>
 <script src="bower_components/angular-resource/angular-resource.js"></script>
 <script src="bower_components/angular-route/angular-route.js"></script>
 <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
 <script src="bower_components/angular-touch/angular-touch.js"></script>
 <script src="bower_components/angular-ui-map/ui-map.js"></script>
 <script src="bower_components/angular-ui-utils/ui-utils.js"></script>

 <!-- endbower -->
 <!-- endbuild -->

    <!-- build:js(.tmp,app) scripts/scripts.js -->

<script src="scripts/app.js"></script>
<script src="scripts/controllers/controllers.js"></script>      
<script src="scripts/directives/directives.js"></script> 

    <!-- endbuild -->

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="../../scripts/waitMe.js"></script> 
<script src="../../scripts/jquery.dlmenu.js"></script>

<script>
  $(function()
      var url = window.location.href; 
      $(".navMenu a").each(function() 
          if(url == (this.href))  
              $(this).closest("a").addClass("current");
          
      );
  );
  (function()
      var parallax = document.querySelectorAll(".parallax"),
        speed = 0.35;
    window.onscroll = function()
        [].slice.call(parallax).forEach(function(el,i)
          var windowYOffset = window.pageYOffset,
            elBackgrounPos = "0 " + (windowYOffset * speed) + "px";  
          el.style.backgroundPosition = elBackgrounPos;
      );
    ;
  )();
  $(function()
    // none, bounce, rotateplane, stretch, orbit, 
    // roundBounce, win8, win8_linear or ios
    var current_effect = 'bounce'; // 
    function run_waitMe(effect)
    $('#spinHere').waitMe(
      //none, rotateplane, stretch, orbit, roundBounce, win8, 
      //win8_linear, ios, facebook, rotation, timer, pulse, 
      //progressBar, bouncePulse or img
      effect: 'bounce',

      //place text under the effect (string).
      text: 'Getting Directions',

      //background for container (string).
      bg: 'rgba(255,255,255,0.7)',

      //color for background animation and text (string).
      color: '#000',

      //change width for elem animation (string).
      sizeW: '',

      //change height for elem animation (string).
      sizeH: '',

      // url to image
      source: ''

      );
      
  );

  $(function() 
    $( '#dl-menu' ).dlmenu(
      animationClasses :  classin : 'dl-animate-in-3', classout : 'dl-animate-out-3' 
    );
  );
</script>

这是我的控制器代码。这是一团糟,但除了我上面提到的问题之外,它在大多数情况下都有效。

'use strict';

 var markers = [];
 var mapApp = angular.module('mapControllers', []);
 mapApp.controller('ListController', function ($scope, $http) 
 $http.get('scripts/bars.json').
 success(function(data, status, headers, config) 
    //this happens if everything works
    $scope.bars = data;
    $scope.markers = [];
    var bounds = new google.maps.LatLngBounds();
    var myLatlng100 = new google.maps.LatLng(45.523007, -122.657890);
    var mapOptions = 
            center: myLatlng100,
            styles: ["featureType":"landscape.natural","elementType":"geometry.fill","stylers":["visibility":"on","color":"#e0efef"],"featureType":"poi","elementType":"geometry.fill","stylers":["visibility":"on","hue":"#1900ff","color":"#c0e8e8"],"featureType":"road","elementType":"geometry","stylers":["lightness":100,"visibility":"simplified"],"featureType":"road","elementType":"labels","stylers":["visibility":"off"],"featureType":"transit.line","elementType":"geometry","stylers":["visibility":"on","lightness":700],"featureType":"water","elementType":"all","stylers":["color":"#7dcdcd"]],
            zoom: 15,
            draggable: false,
            scrollwheel: false,
            disableDoubleClickZoom: true,
            zoomControl: false             
    ;
    var infoWindow = new google.maps.InfoWindow();
     // Create a renderer for directions and bind it to the map.
    var rendererOptions = 
            map: $scope.map
    ;
    var directionsDisplay;
    var directionsService;
    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
    directionsDisplay.setMap($scope.map);

    $scope.openInfoWindow = function(e, selectedMarker)
        e.preventDefault();
        google.maps.event.trigger(selectedMarker, 'click');
    ; 
    var createMarker = function(bar)
        var marker = new google.maps.Marker(
            map: $scope.map,
            position: new google.maps.LatLng(bar.lat, bar.lng),
            title: bar.name
        );

        marker.content = '<div class="contentString"><img src="' + 
        bar.image +
        '"><br/>'+ 
        bar.address +
        ' ' +  
        '<br /><button id="spinner" class="button" onclick="getDir('+bar.lat+', '+bar.lng+')">Get Directions</button>' +
        '</div>';
        marker.image = bar.image;

        google.maps.event.addListener(bar, 'click', function()
            infoWindow.setContent('<a class="info-window" href="' + bar.url + '">' +'<h3 class="info-window" >' + bar.name + '</h3>' + '</a>' +  marker.content);
            infoWindow.open($scope.map, marker);
        );
          google.maps.event.addListener(marker, 'click', function()
            infoWindow.setContent('<a class="info-window" href="' + bar.url + '">' +'<h3 class="info-window" >' + bar.name + '</h3>' + '</a>' +  marker.content);
            infoWindow.open($scope.map, marker);
        );
        google.maps.event.addListener(marker, 'dragstart', function() 
            disableMovement(true);
        );

        google.maps.event.addListener(marker, 'dragend', function() 
            disableMovement(false);
        );         

        $scope.markers.push(marker);
     ;  

    $scope.setAllMap = function(map) 
        for (var i = 0; i < $scope.bars.length; i++)
          createMarker($scope.bars[i]);
          
    
    $scope.setAllMap(map); 

    $scope.clearMarkers = function(map) 
        setAllMap(null);
     
    $(".hideit").on("click", function(map)
           $scope.clearMarkers(); 
       );

    $("#clearPanel").on("click", function(map)
            document.getElementById("panel").innerHTML = " ";
            $('h3.map').show();
            $('#clearPanel').hide();
      );

console.log($scope.bars);
).
error(function(data, status, headers, config) 
  console.log("Did not compute");
);
);   

function disableMovement(disable) 
var mapOptions;
if (disable) 
    mapOptions = 
        draggable: false,
        scrollwheel: false,
        disableDoubleClickZoom: true,
        zoomControl: false
    ;
 else 
    mapOptions = 
        draggable: true,
        scrollwheel: true,
        disableDoubleClickZoom: false,
        zoomControl: true
    ;

map.setOptions(mapOptions);

function getDir(lat,lng,markers,map) 
 run_waitMe();
 document.getElementById("panel").innerHTML = " ";
// If the browser supports the Geolocation API
    if (typeof navigator.geolocation == "undefined") 
      $("#error").text("Your browser doesn't support the Geolocation API");
      return;
    
     // Save the positions' history
     var path = [];
     navigator.geolocation.getCurrentPosition(function (position)        //This gets the
        // Create the map
         var myOptions = 
            styles: ["featureType":"landscape.natural","elementType":"geometry.fill","stylers":["visibility":"on","color":"#e0efef"],"featureType":"poi","elementType":"geometry.fill","stylers":["visibility":"on","hue":"#1900ff","color":"#c0e8e8"],"featureType":"road","elementType":"geometry","stylers":["lightness":100,"visibility":"simplified"],"featureType":"road","elementType":"labels","stylers":["visibility":"off"],"featureType":"transit.line","elementType":"geometry","stylers":["visibility":"on","lightness":700],"featureType":"water","elementType":"all","stylers":["color":"#7dcdcd"]],
            zoom: 15,
            draggable: false,
            scrollwheel: false,
            disableDoubleClickZoom: false,
            zoomControl: true,
            center : path[0],
            mapTypeId : google.maps.MapTypeId.TRANSIT
          ;
        var map = new google.maps.Map(document.getElementById("map"), myOptions);

        var latitude = position.coords.latitude;                       //users current
        var longitude = position.coords.longitude;                    
        var start = new google.maps.LatLng(latitude, longitude);     //Creates variable for map coordinates
           //location
           path.push(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
             // Creates the polyline object
           var polyline = new google.maps.Polyline(
            map: map,
            path: path,
            strokeColor: '#0000FF',
            strokeOpacity: 0.7,
            strokeWeight: 1
           );

        var directionsService = new google.maps.DirectionsService();
        var directionsDisplay = new google.maps.DirectionsRenderer();
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('panel'));

        var request = 
          origin: start,
          destination: new google.maps.LatLng(lat, lng),
          travelMode: google.maps.DirectionsTravelMode.TRANSIT
        ;
        // Removes the overlays from the map, but keeps them in the array
        function clearOverlays() 
          if (markersArray) 
            for (i in markersArray) 
              markersArray[i].setMap(null);
            
          
                     
        directionsService.route(request, function (response, status) 
            if (status == google.maps.DirectionsStatus.OK) 
               directionsDisplay.setDirections(response);
                $('.waitMe').hide();
                $('h3.map').hide();
                $('#clearPanel').show();
                
        );
  );


// none, bounce, rotateplane, stretch, orbit, 
// roundBounce, win8, win8_linear or ios
var current_effect = 'bounce'; // 

function run_waitMe(effect)
$('#spinHere').waitMe(
    //none, rotateplane, stretch, orbit, roundBounce, win8, 
    //win8_linear, ios, facebook, rotation, timer, pulse, 
    //progressBar, bouncePulse or img
    effect: 'bounce',

    //place text under the effect (string).
    text: 'Getting Directions',

    //background for container (string).
    bg: 'rgba(255,255,255,0.7)',

    //color for background animation and text (string).
    color: '#000',

    //change width for elem animation (string).
    sizeW: '',

    //change height for elem animation (string).
    sizeH: '',

    // url to image
    source: ''

    );

【问题讨论】:

setAllMap() 定义在哪里? 对不起 - 在格式化过程中被错误地删除了。我把它加回来了——它在 clearMarkers 和 showMarkers 函数之上。 @MattHerbstritt:这个问题提到了错误和要添加的额外代码,所以它不适合代码审查。 太棒了。我已经在这里发布了所有代码。谁能看到导致问题的原因?我 99% 的问题是范围问题。但我不知道如何解决它。任何帮助表示赞赏。谢谢! @MattHerbstritt 请阅读A guide to Code Review for Stack Overflow users,以免再次误导用户。谢谢。 【参考方案1】:

您的setAllMap() 函数仅存在于$scope 对象上,但您尝试将其作为全局函数调用。这可能是您遇到错误的原因之一。

// the `map` argument is unused and is thus redundant
$scope.setAllMap = function(map) 
    for (var i = 0; i < $scope.bars.length; i++)
          createMarker($scope.bars[i]);
      


// passing map does nothing
$scope.setAllMap(map); 

$scope.clearMarkers = function(map) 
    // this only exists on the $scope object
    // so this is why you will get 'setAllMap is undefined'

    // try changing it to $scope.setAllMap()

    // Also, null does nothing
    setAllMap(null);



【讨论】:

以上是关于隐藏和显示所有标记的主要内容,如果未能解决你的问题,请参考以下文章

html 用占位符显示和隐藏标记

如何在 Android 中使用 Google 地图按类别隐藏/显示标记组?

如何在谷歌地图中显示集群时隐藏标记

div内容超出宽度时如何隐藏?如何显示省略标记?

如何隐藏博客标签搜索中的小部件

Google Maps API 3 - 根据缩放级别显示/隐藏标记