如何異步添加Google maps v3 API上的標記？

我一直在關注目前地圖上的official documentation on how to add markers 如何異步添加Google maps v3 API上的標記？

不過，我一次只能看到一個標記max。如果我嘗試添加另一個，那麼它不起作用（我甚至看不到第一個）。我的過程是這樣的：

我初始化gmaps API：

jQuery(window).ready(function(){ 
     //If we click on Find me Lakes 
     jQuery("#btnInit").click(initiate_geolocation); 
    }); 

    function initiate_geolocation() { 
     if (navigator.geolocation) 
     { 
      var script = document.createElement("script"); 
      script.type = "text/javascript"; 
      script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBbfJJVh0jL1X9b7XFDcPuV7nHD1HlfsKs&sensor=true&callback=initialize"; 
      document.body.appendChild(script); 

      navigator.geolocation.getCurrentPosition(handle_geolocation_query, handle_errors); 
     } 
     else 
     { 
      yqlgeo.get('visitor', normalize_yql_response); 
     } 
    }

然後，我將其顯示在相應的div。但是爲了讓AJAX調用，爲了獲得我想顯示的不同標記的位置，它只是無法正常工作。這裏是顯示簡單地圖的代碼（因爲這是迄今爲止唯一對我有用的東西）。

function handle_geolocation_query(position){ 

     var mapOptions = { 
      zoom: 14, 
      center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 
      mapTypeId: google.maps.MapTypeId.SATELLITE 
      } 

     alert('Lat: ' + position.coords.latitude + ' ' + 
       'Lon: ' + position.coords.longitude); 

     $('#map-canvas').slideToggle('slow', function(){ 
      var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
     }); 

     $.when(getLakes(position.coords.latitude, position.coords.longitude)).done(function(results) { 
      // InitializeGoogleMaps(results); 
      if(results) 
      var data = results.map(function (lake) { 
       //Check if the lake has any open swims, if not, the button will not be clickable and an alert will pop up 
       if (lake.available>0) 
        clickable=true; 
       else 
        clickable=false; 

        return { 
         name: lake.name, 
         fishs: lake.fisheryType, 
         swims: lake.swims, 
         dist: lake.distance, 
         lat: lake.latitude, 
         long: lake.longitude, 
         id: lake.id, 
         avail: lake.available, 
         clickable: clickable, 
         route: Routing.generate('lake_display', { id: lake.id, lat: position.coords.latitude, lng: position.coords.longitude}) 
        } 
       }); 

      var template = Handlebars.compile($('#template').html()); 
      $('#list').append(template(data)); 


     }); 
    };

所以我想在AJAX調用後添加標記。我已經成立了，我應該在調用一個函數的時候（）

function InitializeGoogleMaps(results) { 

};

顯示在foreach循環的標誌，但沒了，不能讓它工作。它看起來像這樣：

CentralPark = new google.maps.LatLng(37.7699298, -122.4469157); 
marker = new google.maps.Marker({ 
    position: location, 
    map: map 
});

任何幫助將是偉大的！

感謝

來源

2013-03-18 Miles M.

的主要問題是，map變量僅在上的slideToggle匿名回調的範圍內聲明。首先聲明頂層函數範圍。

function handle_geolocation_query(position){ 

    var map, 
     mapOptions = { 
      zoom: 14, 
      center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 
      mapTypeId: google.maps.MapTypeId.SATELLITE 
     } 
    ...

然後改變的slideToggle回調初始化變量，而不是重新聲明的：

$('#map-canvas').slideToggle('slow', function(){ 
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
});

那麼你應該通過map作爲第二個參數到您的InitializeGoogleMaps功能和使用InitializeGoogleMaps(results, map)調用它。看看這會給你帶來什麼，並回答任何問題。

來源

2013-03-18 01:57:35

如何異步添加Google maps v3 API上的標記？

回答

相關問題