0

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

尝试：

  1. 当我删除顶部的“$(function(){”和底部的相关括号时，我的 $('#mapall').change(function() 不起作用。

  2. 当我删除body标签的“onload="initialize()">”时，控制台给了我一个“ReferenceError: calcRoute is not defined。这似乎与我的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) 一起工作的人能够使用此方法。

4

1 回答 1

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);
  • 可以隐藏自己的标记
  • 由鼠标或网络服务设置的标记
  • 您必须添加方向面板

我希望它对你有帮助。

于 2013-07-17T20:55:42.453 回答