2016-07-24 6 views
0

私はGoogle Mapを学び始めています。静的に宣言されたときにマーカーが動作して表示されているのは奇妙ですが、DBから来たときには地図上に描かれていません。Google Map DBからのマーカーが機能しない

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

ここにコード全体がありますが、多分何か不足していますか?私もコンソールログを使用して、私は正常にajaxからのすべてのデータをmarkers変数に渡します。

私はここのどこかでこのコードを手に入れて、自分のDBがレコードを要求するように修正したと思います。私はあなたがこの事を私に助けてくれることを願っています。ありがとうございました!ここでEDIT

<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> 

は、私はこの1つ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(marker); 'と同じですが、Google Mapにはマーカーはありません。 – jck

+1

あなたのマーカーの(短い)サンプルを表示json結果 – scaisEdge

+0

OMG!ごめんなさい。私はちょうど彼らが表示しない理由をチェックした後、私のDB値が間違ったテーブルフィールドのデータ型( 'lat/lng')のために間違っていることを知りました。コンソールログの結果を確認して、質問を投稿する前に見落としてくれてありがとう。再度ありがとうございました。それは今働いている。 – jck

1

で私がクローズする方法がわかりませんこの質問は私のDB上のいくつかの問題を見落としていたが、誰かが同じ問題を抱えている可能性があるなら、私は答えを投稿するだろう。 MAPのマーカーを描くことができませんでした。db->table->fields LAT LNGDECIMAL (7,5)というデータ型で参照されており、GOOGLE MAP Tutorial - Using PHP/MySQL with Google MapsにあるものについてはFLOAT (10, 6)に変更されています。

以前のフィールドの問題点は、実際の値(例:120.XXXXX)ではなく、より高い値が99.999999として保存される傾向があったことです。

関連する問題