2016-07-24 74 views
0

我開始學習Google地圖。奇怪的是,當靜態聲明時,標記正在工作並被顯示,但是當它們來自DB時,它們不會被繪製在地圖上。Google地圖標記從數據庫中不工作

// var markers = [[15.054419, 120.664785, 'Device1'], [15.048203, 120.692186, 'Device 2'], [15.033303, 120.694611, 'Device 3']]; 
var markers = []; 

我有這裏的整個代碼,也許我錯過了什麼?我甚至使用控制檯日誌,併成功地將所有數據從ajax傳遞到markers變量。

我想我在SO的某個地方得到了這段代碼,並對其進行了修改,以適應我的數據庫記錄調用。我希望你能幫助我解決這個問題。謝謝!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script> 
<script type="text/javascript"> 
    var map; 
    var global_markers = [];  
// var markers = [[15.054419, 120.664785, 'Device1'], [15.048203, 120.692186, 'Device 2'], [15.033303, 120.694611, 'Device 3']]; 
    var markers = []; 

    var infowindow = new google.maps.InfoWindow({}); 

    function initialize() { 
     geocoder = new google.maps.Geocoder(); 
     var latlng = new google.maps.LatLng(15.058607, 120.660884); 
     var myOptions = { 
      zoom: 10, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     $.ajax({ 
      type: 'GET', 
      url: 'control_panel/get_device_list_ajax', 
      success: 
       function (data) { 
        data = JSON.parse(data); 
        if (data['success']){ 
         var device = data['device_list']; 
         device.forEach(function (dev) { 
          markers.push([dev['dev_geolat'], dev['dev_geolng'], dev['dev_name']]); 
          //console.log(markers); 
         }); 
         addMarker(); 
        } else { 

        } 
       } 
     }); 
    } 

    function addMarker() { 
     console.log(markers); 
     for (var i = 0; i < markers.length; i++) { 
      // obtain the attribues of each marker 
      var lat = parseFloat(markers[i][0]); 
      var lng = parseFloat(markers[i][1]); 
      var trailhead_name = markers[i][2]; 

      var myLatlng = new google.maps.LatLng(lat, lng); 

      var contentString = "<html><body><div><p><h2>" + trailhead_name + "</h2></p></div></body></html>"; 

      var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map, 
       title: "Coordinates: " + lat + " , " + lng + " | Trailhead name: " + trailhead_name 
      }); 

      marker['infowindow'] = contentString; 

      global_markers[i] = marker; 

      google.maps.event.addListener(global_markers[i], 'click', function() { 
       infowindow.setContent(this['infowindow']); 
       infowindow.open(map, this); 
      }); 
     } 
    } 

    window.onload = initialize; 
</script> 

編輯 下面是我用這一個http://jsfiddle.net/kjy112/ZLuTg/上班的jsfiddle(謝謝你就是那個使我這個)

回答

1

可能與你訪問到JSON呈現方式阿賈克斯

markers.push([dev.dev_geolat, dev.dev_geolng, dev.dev_name]); 

或JSON內容

+0

感謝您快速回復。但它具有相同的效果,我仍然獲得'device_list'的'console.log(markers);',但在Google Map上沒有標記。 – jck

+1

顯示您的標記的(短)樣本json結果 – scaisEdge

+0

OMG!對不起。我發現在幾個小時後檢查他們爲什麼不顯示,我的DB值由於錯誤的表字段數據類型('lat/lng')而不正確。謝謝你,我檢查了控制檯日誌中的結果,並在發佈問題之前忽略了它們。再次感謝您的幫助。它現在正在工作。 – jck

1

我不知道如何關閉這個問題,因爲我忽略了我的數據庫的一些問題,但我會發布我的答案,如果有人可能會出現相同的問題(嗯,我不知道那嘿嘿)

我從AJAX獲得相同的響應數據庫中的值和我無法在MAP上繪製標記,我發現db->table->fields LAT LNG被引用的數據類型爲DECIMAL (7,5),並將其更改爲FLOAT (10, 6),以瞭解在此GOOGLE MAP Tutorial - Using PHP/MySQL with Google Maps中發現的內容。

之前的問題是較高的值往往被保存爲99.999999而不是實際值(例如120.XXXXX)。