2016-07-24 2 views
0

Я начинаю изучать Google Map. Странно, что при статическом объявлении маркеры работают и отображаются, но когда они поступают из БД, они не отображаются на карте.Маркер Google Map не работает, когда из базы данных

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

EDIT Вот jsfiddle я привык работать с этим http://jsfiddle.net/kjy112/ZLuTg/ (спасибо тому, который привел меня к этому)

ответ

1

Может быть связано с тем, как вы доступ к JSon визуализации по AJAX

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

или содержание JSon

+0

Благодарим за отзыв. Но он имеет тот же эффект, я все равно получаю тот же «console.log (markers)» из 'device_list', но без маркеров на Google Map. – jck

+1

показать (короткий) образец ваших маркеров json result – 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).

Смежные вопросы