標記未在多個折線上顯示

Question

function disp_initialize() 
{ 

    var bike=<?php echo $_GET['bike_id']; ?>; 
    $.ajax({ 
      "dataType": "json", 
      "type": "POST", 
      "url": "home.php?bike_id="+bike, 
      success: function(data) { 
      if(data.sMsg==0) 
      { 
       $("#map-canvas").hide(); 
      } 
      else if(data.sBlankMsg==0){ 
       $("#map-canvas").hide(); 
      } 
      else 
      { 
       initialize(data); 
      } 
     } 
    });  
}  

function initialize(flightPlanCoordinates_arr) 
    { 
     var flightPlanCoordinates_arr = flightPlanCoordinates_arr.mapData; 

     var flightPlanCoordinates_arr_p = new Array(); 
     var j = 0;var k = 0; 
     var store = new Array(); 
     for(var i in flightPlanCoordinates_arr) 
     { 
      if(j==0) 
      { 
       flightPlanCoordinates_arr_p[j] = flightPlanCoordinates_arr[i]; 
       j++; 
      } 
      else if(flightPlanCoordinates_arr_p[j-1]['state']==1 && flightPlanCoordinates_arr[i]['state']==0) 
      { 
       flightPlanCoordinates_arr_p[j] = flightPlanCoordinates_arr[i]; 
       j++; 
      } 
      else if(flightPlanCoordinates_arr_p[j-1]['state']==0 && flightPlanCoordinates_arr[i]['state']==1) 
      { 
       store[k]=j; 
       flightPlanCoordinates_arr_p[j] = flightPlanCoordinates_arr[i]; 
       j++;k++; 
      } 
     } 

     //console.log(store); 
     var flightPlanCoordinates = new Array(); 
     for(var i in flightPlanCoordinates_arr_p) 
     { 
      flightPlanCoordinates[i] = new google.maps.LatLng(flightPlanCoordinates_arr_p[i]["latitude"],flightPlanCoordinates_arr_p[i]["longitude"]); 
     } 

     if(flightPlanCoordinates_arr != '') 
     { 
      var mapOptions = { 
       zoom: 10, 
       center: new google.maps.LatLng(flightPlanCoordinates_arr[0]["latitude"],flightPlanCoordinates_arr[0]["longitude"]), 
       mapTypeId: google.maps.MapTypeId.TERRAIN 
      }; 
     } 
     var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 
      var Colors = ["#FF0000", "#00FF00", "#0000FF", "#FFFFFF", "#000000", "#FFFF00", "#00FFFF", "#FF00FF"]; 

      for (var i = 0; i < flightPlanCoordinates.length; i++) 
      { 
       if(jQuery.inArray(i+1,store)===-1) 
       { 
        var colour = Colors[i]; 
        var flightPath = new google.maps.Polyline({ 
         path: [flightPlanCoordinates[i], flightPlanCoordinates[i+1]], 
         geodesic: true, 
         strokeColor: '#FFFF00', 
         strokeOpacity: 2.0, 
         strokeWeight: 10, 
         map: map 
        }); 
       } 

      }   
      flightPath.setMap(map); 
     var location = ""; 
     var location_details = ""; 
      var speed=""; 

      for(var i in flightPlanCoordinates_arr) 
      { 

       location = flightPlanCoordinates_arr[i]["location"]; 
       location_details = flightPlanCoordinates_arr[i]["location_details"]; 
       speed = flightPlanCoordinates_arr[i]["speed"]; 

       var marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(flightPlanCoordinates_arr[i]["latitude"],flightPlanCoordinates_arr[i]["longitude"]), 
        map: map 
       }); 
       marker.setIcon('images/bike.png'); 
       } 

     new google.maps.event.addListener(flightPath, 'mouseover', function(event) { 
       var populationOptions = { 
       strokeColor: '#11C111', 
       strokeOpacity: 0.8, 
       strokeWeight: 4, 
       fillColor: 'transparent', 
       fillOpacity: 4, 
       map: map, 
       center: event.latLng, 
       position: event.latLng, 
       radius: 40 
      }; 
      // Add the circle for this city to the map. 
      cityCircle = new google.maps.Circle(populationOptions); 
      attachSecretMessage(marker, contentHtml,map); 
     }); 

     new google.maps.event.addListener(flightPath, 'mouseout', function(event) { 
      var marker = new google.maps.Marker({ 
       position: event.latLng, 
      }); 
      // Add the circle for this city to the map. 
      cityCircle.setMap(null); 
     }); 
    } 
    function attachSecretMessage(marker, contentHtml, map) { 

      var infowindow = new google.maps.InfoWindow({ 
      position: marker.position, 
      content: contentHtml 
     }); 
     google.maps.event.addListener(marker, 'mouseover', function() { 
      infowindow.open(map); 
     }); 
     google.maps.event.addListener(marker, 'mouseout', function() { 
      infowindow.close(); 
     }); 
    } 

mapData是一種帶有「緯度」，「經度」，「速度」，「狀態」，「位置」值的JSON響應。

我得出了拉圖和多頭多段線，但指標不displayed.And收到此錯誤 類型錯誤：F未定義

Answer 1

你的設計是不是很清楚，我完全是。

如果您想讓標記在mouseout事件偵聽器中可見，那麼您必須提供地圖值。例如：

var marker = new google.maps.Marker({ 
     position: event.latLng, 
     map: map 
    }); 

在這種情況下，你必須做出map全球。目前它在功能initialize()中被本地定義。所以：

var map; 

function initialize(flightPlanCoordinates_arr) { 
... 
    map = new google.maps.Map(document.getElementById('map'), mapOptions); 
... 
} 

此外，似乎這for循環

for (var i = 0; i < flightPlanCoordinates.length; i++) { 

應進行初始化：

for (var i = 0; i < flightPlanCoordinates.length - 1; i++) { 

更新：看到example at jsbin。我可以得到最好的結果，因爲我不瞭解一些變量檢查的整個邏輯。如果你設置探測器圖標標記將被設置。注意：我不能執行這個ajax調用，所以我不得不建模數據。