使用標記填充Google地圖JSON

我正在嘗試使用標記填充Google地圖。每個標記的信息包含在此陣列中：使用標記填充Google地圖JSON

[{"id":"1","name":"toler","lng":"110.33929824829102","lat":"-7.779369982234709","created_at":"2014-02-21 16:19:28","updated_at":"2014-02-21 16:19:28"},{"id":"2","name":"hallo :)","lng":"110.36865234375","lat":"-7.797738383377609","created_at":"2014-02-21 16:19:49","updated_at":"2014-02-21 16:19:49"}]

但是，我的地圖不顯示標記。我在我的JavaScript中使用此代碼：

getLocations(); 

function getLocations() { 

    alert('hello'); 
    $.ajax({ 
     type: "GET", 
     url: "http://localhost:8888/public/test", 
     dataType: "jsonp", 
     success: function(json){ 
      $.each(json, function(i, entry){ 
       PlotMarker(json[i].lat, json[i].long); 
      }); 
     }, 
     error: function(err){ 
      console.log(err); 
     } 
    }); 
} 

function PlotMarker(lat, long){ 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(lat, long), 
     map: map, 
     draggable: false, 
     animation: google.maps.Animation.DROP 
    }); 
    markerLocations.push(marker); 
}

有什麼辦法可以解決這個問題嗎？調用此URL

http://localhost:8888/public/test

返回上面顯示的JSON。

任何幫助將不勝感激。

謝謝。

編輯：

function initialize() { 

var markers = []; 
var latLng = new google.maps.LatLng(-7.8,110.3666667); 
var map = new google.maps.Map(document.getElementById('map-canvas'), { 
zoom: 13, 
center: latLng, 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

}

來源

2014-02-21 patrick

'gmap'聲明在哪裏？ – Andy

你的意思是初始化函數？ – patrick

如果你已經用'var'在'initialize'中聲明'gmap'，那麼其他函數將無法看到它。在函數之外聲明'gmap'，例如：'var gmap'，然後在'initialize'內部執行'gmap = whatever'。 – Andy

嘗試改變：

PlotMarker(entry.location.lat, entry.location.lng);

到：

PlotMarker(entry.lat, entry.lng);

來源

2014-02-21 15:54:53 swiss196

仍然不工作.. – patrick

嘗試改變這一點：

PlotMarker(entry.location.lat, entry.location.lng);

要：

PlotMarker(json[i].lat, json[i].lng);

我想這是因爲外[]的。

來源

2014-02-21 16:12:36 Swires

不幸的是，這似乎並沒有幫助。 d更新代碼的問題。 – patrick

聲明您的地圖變量外部的initialize函數。這是唯一的辦法，其他功能將能夠看到它：

var map; 
function initialize() { 
    var markers = []; 
    var latLng = new google.maps.LatLng(-7.8,110.3666667); 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
    zoom: 13, 
    center: latLng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
}

來源

2014-02-21 16:32:03 Andy

對不起。這也不起作用。 – patrick

把你所有的代碼放在一個jsFiddle中，我會用一個squiz。 – Andy

http://jsfiddle.net/676FY/1/這是我完整的js代碼。這些功能中的大部分功能都可以讓用戶將新點保存到數據庫中。 – patrick

的主要問題是initialize()開始之前getLocations()被調用。您必須註釋掉getLocations();並將其移至initialize()函數的末尾。

這還不夠：map定義有initialize()功能以外的地方移動，不應裏面initialize()功能被重新定義。

markerLocations，用於PlotMarker()，沒有定義。應該被定義爲全球像map

var map; 
var markerLocations = []; 

function initialize() { 
    ... 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
     zoom: 13, 
     center: latLng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    ... 
    getLocations(); 
}

PlotMarker()一直被稱爲像：

PlotMarker(entry.lat, entry.lng);

來源

2014-02-21 18:04:32

你還會打電話給你初始化函數？當頁面加載時調用它。

google.maps.addDomListener(window, 'load', initialize);

如圖所示here。

來源

2014-02-22 00:13:41 Skitterm

這些功能的順序是什麼？你最先打電話給哪一位？

我遇到過這種問題，會發生什麼情況是，地圖還沒有完成加載所有的瓷磚，所以標記不能放在那些，所以他們不出現。但是，當您檢查控制檯時，標記對象就在那裏。

這是我如何解決它：

google.maps.event.addListener(map, 'tilesloaded', function() { 
    plotMarkers(); 
    google.maps.event.clearListeners(map, 'tilesloaded'); 
});

它保證了地圖圖塊正密謀標記之前完全加載。在這種情況下，標記肯定是可見的。

來源

2014-03-12 10:41:47 Carmela

使用標記填充Google地圖JSON

回答

相關問題