Попытка динамического получения маркеров из базы данных с использованием php и javascript

Я пытаюсь получить маркеры динамически из базы данных, используя sql и php. Проблема, с которой я сталкиваюсь, заключается в создании массива маркеров в JavaScript. Я уже ссылался на вопросы, задаваемые на stackru, но не повезло...

function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                alert("Geolocation is not supported by this browser.");
            }
        }
        function showPosition(position) {
            var latitude = position.coords.latitude; 
            var longitude = position.coords.longitude;
            initMap(latitude,longitude);
            addMarker(latitude,longitude); 
        }
        function initMap(latitude,longitude){
            var options = {center :{lat:latitude, lng :longitude} ,
                zoom:8
            }
            var map = new google.maps.Map(document.getElementById('map'),options);
            var marker = new google.maps.Marker({
                position:{lat:latitude, lng :longitude},
                map:map
            })

        }
        var markers = [
            <?php
                require_once '../includes/dbconfig.inc.php';
                $marker_fetcher = "SELECT ad_lat,ad_long FROM `tbl_ads`";
                $result = mysqli_query($conn,$marker_fetcher);
                while ($row = mysqli_fetch_assoc($result)) {
                    $lat = $row['ad_lat'];
                    $long = $row['ad_long'];
                    echo '{';
                    echo $lat;
                    echo ',';
                    echo $long;
                    echo '},';
                }
            ?>
        ];
        function addMarker(props){
            alert(markers.length)
        }
            $(document).ready(function(){
                getLocation();
            });

JavaScript из источника

{19.1643153,72.98971789999996},{19.1816553,72.9711542},{19.2403305,73.13053949999994},{29.6856929,76.99048249999998},{19.2532887,73.13668610000002},{19.2532887,73.13668610000002},{19.2292364,72.85967119999998},{19.2292364,72.85967119999998},{19.0606917,72.83624970000005},{18.5596581,73.7799374},{19.157935,72.99347620000003},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{30.900965,75.85727580000002},{19.2403305,73.13053949999994},{19.157935,72.99347620000003},{19.157935,72.99347620000003},{19.157935,72.99347620000003},{19.157935,72.99347620000003},{53.9332706,-116.5765035},{19.157935,72.99347620000003},{19.2183307,72.97808970000006},{19.157935,72.99347620000003},{53.9332706,-116.5765035},{46.227638,2.213749000000007},{19.157935,72.99347620000003},{19.157935,72.99347620000003},

1 ответ

Решение

Массив позиций маркеров не является допустимым массивом Ja vaScript. Сделайте так, чтобы позиции были объектами google.maps.LatLngLiteral. Измените код, который генерирует Ja vaScript для вашего массива маркеров:

var markers = [
  <?php
      require_once '../includes/dbconfig.inc.php';
      $marker_fetcher = "SELECT ad_lat,ad_long FROM `tbl_ads`";
      $result = mysqli_query($conn,$marker_fetcher);
      while ($row = mysqli_fetch_assoc($result)) {
         $lat = $row['ad_lat'];
         $long = $row['ad_long'];
         echo '{';
         echo $lat;
         echo ',';
         echo $long;
         echo '},';
      }
  ?>
];

Для того, чтобы:

var markers = [
  <?php
      require_once '../includes/dbconfig.inc.php';
      $marker_fetcher = "SELECT ad_lat,ad_long FROM `tbl_ads`";
      $result = mysqli_query($conn,$marker_fetcher);
      while ($row = mysqli_fetch_assoc($result)) {
         $lat = $row['ad_lat'];
         $long = $row['ad_long'];
         echo '{lat:';
         echo $lat;
         echo ', lng:';
         echo $long;
         echo '},';
      }
  ?>
];

Итак, ваш массив маркеров выглядит так:

var markers = [
  {lat: 19.1643153, lng: 72.98971789999996},
  {lat: 19.1816553, lng: 72.9711542},
  {lat: 19.2403305, lng: 73.13053949999994},
  // ...
];

доказательство концепции скрипки

скриншот получившейся карты

фрагмент кода:

var bounds;
var map = null;

function initMap(latitude, longitude) {
  var options = {
    center: {
      lat: latitude,
      lng: longitude
    },
    zoom: 8
  }
  map = new google.maps.Map(document.getElementById('map'), options);
  var marker = new google.maps.Marker({
    position: {
      lat: latitude,
      lng: longitude
    },
    map: map
  })
  bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markers.length; i++) {
    addMarker(markers[i]);
  }
  map.fitBounds(bounds);
}
var markers = [{lat:19.1643153, lng:72.98971789999996}, {lat:19.1816553, lng:72.9711542}, {lat:19.2403305, lng:73.13053949999994}, {lat:29.6856929, lng:76.99048249999998}, {lat:19.2532887, lng:73.13668610000002}, {lat:19.2532887, lng:73.13668610000002}, {lat:19.2292364, lng:72.85967119999998}, {lat:19.2292364, lng:72.85967119999998}, {lat:19.0606917, lng:72.83624970000005}, {lat:18.5596581, lng:73.7799374}, {lat:19.157935, lng:72.99347620000003}, {lat:30.900965, lng:75.85727580000002}, {lat:19.2403305, lng:73.13053949999994}, {lat:19.157935, lng:72.99347620000003}, {lat:53.9332706, lng:-116.5765035}, {lat:19.157935, lng:72.99347620000003}, {lat:19.2183307, lng:72.97808970000006}, {lat:46.227638, lng:2.213749000000007}];

function addMarker(props) {
  console.log(JSON.stringify(props));
  var marker = new google.maps.Marker({
    position: props,
    map: map
  });
  console.log(marker.getPosition().toUrlValue(6));
  bounds.extend(marker.getPosition());
}
google.maps.event.addDomListener(window, "load", function() {
  initMap(19.16, 75.857)
});
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Другие вопросы по тегам