0

ご協力いただきありがとうございます。JSON オブジェクトから約 2000 個のマーカーを運転ルート案内ツールと組み合わせています。何を試しても、初期化の問題が発生し続けます。

試み：

  1. 上部の「$(function(){」と下部の関連する括弧を削除すると、私の $('#mapall').change(function() は機能しません。

  2. body タグの「onload="initialize()">」を削除すると、コンソールに「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 のコメントに基づいて、コードを並べ替え、本文のオンロードを削除しました。これが新しいコードですが、チェックボックスをオフにしてからもう一度オンにしようとすると、マーカーが再表示されません。コンソールにエラーがないので、どこに問題があるのか​​わかりません。

    <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

Here is the JS stuff to initialize the map / handlers properly. Just copy + paste.

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);
  • own markers can be hidden
  • markers set by mouse or from a webservice
  • you have to add the directions panel

I hope it helps you.

于 2013-07-17T20:55:42.453 に答える