2016-10-27 33 views
1

我想要創建一個數組,我將其分配給標記變量,這是在Google地圖中顯示標記。但我所擁有的只是文章標籤的數據屬性。從文章列表中創建數組標籤的數據屬性

這就是我工作:http://jsfiddle.net/gilbertlucas46/qpvdrjh8/7/ 如果檢查控制檯它會告訴你這個

enter image description here

這是我想達到

var markers = [ 
    ['Palace of Westminster, London', -27.4687253, 153.0273166], 
    ['Palace of Westminster, London', -27.4687253, 153.0273166] 
]; 

這是什麼代碼,我必須在谷歌地圖中顯示標記

jQuery(function($) { 
      // Asynchronously Load the map API 
      var script = document.createElement('script'); 
      script.src = "//maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"; 
      document.body.appendChild(script); 
     }); 

     function initialize() { 
      var map; 
      var bounds = new google.maps.LatLngBounds(); 
      var mapOptions = { 
       mapTypeId: 'roadmap' 
      }; 
      // var latitude= $('div.locations').find('.location').attr("data-latitude"); 
      // var longitude= $('div.locations').find('.location').attr("data-longitude"); 
      // var coor = latitude + ' , ' + longitude; 
      var latitude, 
       longitude, 
       dataName, 
       coor, 
       markers; 

      $(".location").each(function(){ 
      latitude = $(this).attr('data-latitude'); 
      longitude = $(this).attr('data-longitude'); 
      dataName = $(this).attr('data-name'); 
      coor = latitude + ' , ' + longitude; 
      // Display a map on the page 
      map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
      map.setTilt(45); 

      // Multiple Markers 
      var markers = new Array([dataName, latitude, longitude]); 
      console.log(markers); 


      // Info Window Content 
      var infoWindowContent = [ 
       // ['<div class="info_content">' + 
       // '<h3>London Eye</h3>' + 
       // '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' +  '</div>'], 
       // ['<div class="info_content">' + 
       // '<h3>Palace of Westminster</h3>' + 
       // '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' + 
       // '</div>'] 
      ]; 

      // Display multiple markers on a map 
      var infoWindow = new google.maps.InfoWindow(), marker, i; 

      // Loop through our array of markers & place each one on the map 
      for(i = 0; i < markers.length; i++) { 
       var position = new google.maps.LatLng(markers[i][1], markers[i][2]); 
       bounds.extend(position); 
       marker = new google.maps.Marker({ 
        position: position, 
        map: map, 
        title: markers[i][0] 
       }); 

       // Allow each marker to have an info window 
       google.maps.event.addListener(marker, 'click', (function(marker, i) { 
        return function() { 
         infoWindow.setContent(infoWindowContent[i][0]); 
         infoWindow.open(map, marker); 
        } 
       })(marker, i)); 

       // Automatically center the map fitting all markers on the screen 
       map.fitBounds(bounds); 
      } 
      }); 

      // Override our map zoom level once our fitBounds function runs (Make sure it only runs once) 
      var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { 
       this.setZoom(10); 
       google.maps.event.removeListener(boundsListener); 
      }); 
     } 

回答

1

嘗試使用push將其添加到數組並將循環外的變量設置?

http://jsfiddle.net/qjd23gnm/

我把它變成一個變量。檢查小提琴,看看它是否你需要。

 var markers = []; 
 

 
     $(".location").each(function() { 
 
     latitude = $(this).attr('data-latitude'); 
 
     longitude = $(this).attr('data-longitude'); 
 
     dataName = $(this).attr('data-name'); 
 
     <!-- coor = latitude + ' , ' + longitude; --> 
 
     // Multiple Markers 
 
     markers.push([dataName, latitude, longitude]); 
 

 
     }); 
 
     console.log(markers);

+0

我認爲它的工作!謝謝 –