Question

感谢您提供的任何帮助！我将来自JSON对象的约2000个标记与行车路线工具相结合。无论我尝试什么，我都会遇到初始化问题。

尝试：

当我删除顶部的“$（function（）{”和底部的相关括号时，我的$（'＃mapall'）。change（function（）不起作用。
当我删除body标签的“onload =”initialize（）“＆gt;”时，控制台给我一个“ReferenceError：calcRoute未定义。这似乎与我的jquery按钮有关（下面的代码）：
```
$("#showmapview").click(function() {
$("#map-form-page").hide();
$("#map-route-page").show();
window.location.hash = '#new-map-page';
google.maps.event.trigger(map, 'resize');
}); 
```

这是我的JS。我的HTML正文包含body onload =“initialize（）”

    <script type='text/javascript'> 
    $(function(){
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;            
        var arrMarkers = [];
        var arrInfoWindows = null;

        function clearOverlays() {
          if (arrMarkers) {
            for( var i = 0, n = arrMarkers.length; i < n; ++i ) {
              arrMarkers[i].setMap(null);
            }
          }
        }

        function showOverlays() {
          if (arrMarkers) {
            for( var i = 0, n = arrMarkers.length; i < n; ++i ) {
              arrMarkers[i].setMap(map);
            }
          }
        }

        $('#mapall').change(function() {
         if( $('#mapall').attr("checked")) {
                  showOverlays();
                  }
                  else  {
                  clearOverlays();
                  }
        });

    function initialize() {
          var rendererOptions = {
          CODE
         };

          directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
          CODE HERE
            }
          map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        $.getJSON( "CODE HERE", {}, function( data ) {
        $.each( data, function( i, item ) {
        var loc = item.masterlocation;

        var marker = new google.maps.Marker({
        position: new google.maps.LatLng(+loc.latitude, +loc.longitude),
        map: map,
        title: loc.nickname,
        });
        arrMarkers.push(marker);

          CODE
          });
                    });

          directionsDisplay.setMap(map);
        }

     ENDS INITIALIZE

        function calcRoute() {
          CODE HERE

          var request = {
              origin: start,
              destination: end,
              waypoints: waypts,
              optimizeWaypoints: optimize,
              travelMode: google.maps.TravelMode.DRIVING
          };
          directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);
              var route = response.routes[0];
              var summaryPanel = document.getElementById("directions_panel");

              CODE HERE
            }

                STATUS WARNINGS HERE


          });
        }   
    google.maps.event.addDomListener(window, 'load', initialize); 
    });             
    </script>

编辑1

基于@ bnz的评论，我重新排序了我的代码并删除了正文onload。这是新代码，但现在，如果我取消选中该复选框，然后尝试再次检查，则标记将不会重新出现。控制台中没有错误，所以我不确定问题出在哪里。

    <script>
    $(function(){
    var directionsDisplay;
    var map;            

        function clearOverlays() {
          if (arrMarkers) {
            for( var i = 0, n = arrMarkers.length; i < n; ++i ) {
              arrMarkers[i].setMap(null);
            }
          }
        }

        function showOverlays() {
          if (arrMarkers) {
            for( var i = 0, n = arrMarkers.length; i < n; ++i ) {
              arrMarkers[i].setMap(map);
            }
          }
        }

        $('#mapall').change(function() {
         if( $('#mapall').attr("checked")) {
                  showOverlays();
                  }
                  else  {
                  clearOverlays();
                  }
        });

        google.maps.event.addDomListener(window, 'load', initialize); 
        });

        var directionsService = new google.maps.DirectionsService();
        var arrMarkers = [];
        var arrInfoWindows = null;

    function initialize() {
          CODE
        }

    function calcRoute() {
          CODE
        }; 

</script>

**编辑2 **

我已经解决了复选框无法打开和关闭标记的问题。出于某种原因，我的javascript配置要求我使用

    arrMarkers[i].setVisible(false);

和

    arrMarkers[i].setVisible(true);

由于我的原始问题涉及初始化函数，@ bnz的评论帮助我解决了这个问题，将答案归功于@bnz。希望其他无法让arrMarkers使用setMap（null）的人将能够使用此方法。

Answer 1

这是正确初始化地图/处理程序的JS内容。只需复制+粘贴。

http://heidegluehen.com/bnz/17668427/

var directionsService = new google.maps.DirectionsService();
var map;
var arrMarkers = [];

$(function(){
console.log('dom ready');

function clearOverlays() {
  if (arrMarkers) {
    for( var i = 0, n = arrMarkers.length; i < n; i++ ) {
      arrMarkers[i].setMap(null);
    }
  }
}

function showOverlays() {
  if (arrMarkers) {
    for( var i = 0, n = arrMarkers.length; i < n; i++ ) {
      arrMarkers[i].setMap(map);
    }
  }
}

$('#mapall').change(function() {
 if( $('#mapall').prop("checked")) {
          showOverlays();
          }
          else  {
          clearOverlays();
          }
});

$('#end').change( function(){
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
});
});

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsDisplay.setMap(map);

function addMarker(location){
      marker = new google.maps.Marker({
      position: location,
      map: map
      });
arrMarkers.push(marker);
}  

 var jqxhr = $.getJSON('points.json', function(data) {
 console.log(data);
        $.each(data, function( i, item ) {
        console.log('hello');
        var loc = item.masterlocation;

        marker = new google.maps.Marker({
        position: new google.maps.LatLng(+loc.latitude, +loc.longitude),
        map: map,
        title: loc.nickname,
        });
        arrMarkers.push(marker);
        });
        });

jqxhr.complete(function() { console.log( "json loaded" ); });       

google.maps.event.addListener(map, 'click', function(event) 
      {
      addMarker(event.latLng);
      });      
}

google.maps.event.addDomListener(window, 'load', initialize);

自己的标记可以隐藏
由鼠标或网络服务设置的标记
您必须添加路线面板

我希望它可以帮到你。

当组合标记和行驶方向时，“未捕获的参考错误：未定义初始化”

1 个答案: