2016-09-01 2 views
0

У меня есть эти коды, которые получают лат и lng из базы данных и показывают их на карте google с маркерами, но на нем не отображается маркер.маркеры не отображаются на карте

<!doctype html> 
<html> 
<head> 
    <meta charset='utf-8'/> 
    <title>Google Maps</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src='https://maps.google.com/maps/api/js?key=AIzaSyAKcut1aeRFdjPTS5QPefgbrnQIAVkGuis' type='text/javascript'></script> 
    <script type='text/javascript'> 
     (function(){ 

      var map,marker,latlng,bounds,infowin; 
      /* initial locations for map */ 
      var _lat=14.676; 
      var _lng=121.0437; 



      function showMap(){ 
       /* set the default initial location */ 
       latlng={ lat: _lat, lng: _lng }; 

       bounds = new google.maps.LatLngBounds(); 
       infowin = new google.maps.InfoWindow(); 

       /* invoke the map */ 
       map = new google.maps.Map(document.getElementById('map'), { 
        center:latlng, 
        zoom: 10 
       }); 

       /* show the initial marker */ 
       marker = new google.maps.Marker({ 
        position:latlng, 
        map: map, 
        title: 'Hello World!' 
       }); 
       bounds.extend(marker.position); 


       /* I think you can use the jQuery like this within the showMap function? */ 
       $.ajax({ 
        url: get.php, 
        data: {'ajax':true }, 
        dataType: 'json', 
        success: function(data, status){ 
         $.each(data, function(i,item){ 
          /* add a marker for each location in response data */ 
          addMarker(item.lat, item.lng, item.name); 
         }); 
        }, 
        error: function(){ 
         output.text('There was an error loading the data.'); 
        } 
       });     
      } 

      /* simple function just to add a new marker */ 
      function addMarker(lat,lng,title){ 
       marker = new google.maps.Marker({/* Cast the returned data as floats using parseFloat() */ 
        position:{ lat:parseFloat(lat), lng:parseFloat(lng) }, 
        map:map, 
        title:title 
       }); 

       google.maps.event.addListener(marker, 'click', function(event){ 
        infowin.setContent(this.title); 
        infowin.open(map,this); 
        infowin.setPosition(this.position); 
       }.bind(marker)); 

       bounds.extend(marker.position); 
       map.fitBounds(bounds); 
      } 


      document.addEventListener('DOMContentLoaded', showMap, false); 
     }()); 
    </script> 
    <style> 
     html, html body, #map{ height:100%; width:100%; padding:0; margin:0; } 
    </style> 
</head> 
<body> 
    <div id='map'></div> 
</body> 

Это мой get.php, который получает данные из базы данных.

$mysql ="SELECT lat,lng FROM `coordinates`"; 
$result = mysqli_query($connect, $mysql); 
if (!empty($result)) 
{ 

while ($row=mysqli_fetch_array($result)) 
{ 
    $latlng[] = array(
    'lat' => $row['lat'], 
    'lng' => $row['lng'], 
    ); 

    } 
} 

    mysqli_close($connect); 

header('Content-Type:application/json'); 
    echo json_encode($latlng); 
?> 

Это один работает и получить лат и LNG из базы данных, но маркеры по-прежнему не отображаются в Google Maps. Может кто-нибудь сказать мне, почему?

ответ

1

Вы не выбираете «имя» из базы данных, но вы используете item.name в качестве параметра для addMarker() функции.

Таким образом изменить MySQL запрос:

"SELECT lat,lng,name FROM `coordinates`"; 

затем добавить в массив:

$latlng[] = array(
'lat' => $row['lat'], 
'lng' => $row['lng'], 
'name' => $row['name'] 
); 

Я попробовал ваш код яваскрипта, и это выглядит, что добавление маркеров работает без Ajax. Пожалуйста, добавьте строку JSON на свой вопрос.

Если у вас будет еще проблемы с добавлением маркеров с помощью AJAX, вы должны отправить JSON (только открытый get.php в браузере) и проверить, если у вас есть какие-либо ошибки в консоли разработчика - для Firefox (CTRL + SHIFT + K).

+0

Он по-прежнему не добавляет маркеры на карту. Считаете ли вы, что проблема заключается в ajax в «url»? Правильно ли путь? Мой «get.php» сохраняется/хранится в Интернете на сайте бесплатного хостинга. – Monds

+0

А также как он работал для вас без использования ajax? Могу ли я увидеть коды? – Monds

+0

@Monds Лучший способ узнать, где проблема - проверить файл get.php в своем браузере. Вы должны увидеть строку или ошибку JSON. Попробуйте открыть get.php в браузере с вашего хостинга и отправить то, что он пишет. – Bulva

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