Почему не работает многократный маркер «Карта» в Google Map? - PullRequest
Новая
       20

Почему не работает многократный маркер «Карта» в Google Map?

0 голосов
/ 30 января 2019

Я пытаюсь добавить несколько маркеров. Данные получаются из базы данных и передаются в функцию 'initMap', затем карта и маркер отображаются правильно, но проблема в , поскольку цикл работает неправильно .I имеют два местоположения, но показывают только одно местоположение (последнее местоположение) .

This is view of now

function initMap(post_obj) {
    //*** json object convert to JS array
            var columns = ['longitude', 'latitude', 'placeName', 'phoneNo'];
    var locations = JSON.parse(post_obj).map(function(obj) {
      return columns.map(function(key) {
        return obj[key];
      });
    });

    var mapProp= {
        center:new google.maps.LatLng(7.8731,80.7718), //locate Sri Lanka
        zoom:7,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [{
            featureType: 'all',
            stylers: [
                {saturation: -100}, //Grey Color map
                {gamma: 0.50},
            ]

        }]
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),mapProp);

     var marker, i;
     var infowindow = new google.maps.InfoWindow();

    for (i = 0; i < locations.length; i++) {  
        console.log(locations[i][0]);
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

}

'post_obj' выглядит как 

[{"longitude":"79.92094122685603","latitude":"6.858206289512469","placeName":"refill Place Rika's","phoneNo":""},{"longitude":"6.534608320452274","latitude":"81.19367459766863","placeName":"","phoneNo":""}]

Пожалуйста, помогите мне найти решение.

Ответы [ 3 ]

0 голосов
/ 30 января 2019

Попробуйте этот код, вам также нужно получить ключ API от Google. 

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
   var locations = [
       ['Maradana Railway', 6.929537, 79.866271, 5],
       ['Fort Railway', 6.933456, 79.850435, 4],
       ['Secretariat Railway', 6.931965, 79.846058, 3]
   ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(51.530616, -0.123125),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

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

    var marker, i;
    var markers = new Array();

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      markers.push(marker);

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

    function AutoCenter() {
      //  Create a new viewpoint bound
      var bounds = new google.maps.LatLngBounds();
      //  Go through each...
      $.each(markers, function (index, marker) {
      bounds.extend(marker.position);
      });
      //  Fit these bounds to the map
      map.fitBounds(bounds);
    }
    AutoCenter();

  </script> 
</body>
</html>
0 голосов
/ 30 января 2019

Произошло 2 ошибки / ошибки.

Если изменить position: new google.maps.LatLng(locations[i][0], locations[i][1] на position: new google.maps.LatLng(locations[i][1], locations[i][0], то покажите другое местоположение (местоположение первого пальца). Затем я понимаю, что данные, полученные из базы данных, тоже имеют проблемы. В данныхВ результате одна пара Долгота и Широта была поменяна. Так что если мы изменим номер индекса этого кода position: new google.maps.LatLng(locations[i][0], locations[i][1], то отобразим связанный маркер местоположения.

Объект результата из базы данных: 'post_obj' 

[{"longitude":"79.92094122685603","latitude":"6.858206289512469","placeName":"refill Place Rika's","phoneNo":""},{"longitude":"6.534608320452274","latitude":"81.19367459766863","placeName":"","phoneNo":""}]

В результате объект первым элементом является «долгота».Так что position: new google.maps.LatLng(locations[i][0], locations[i][1] до position: new google.maps.LatLng(locations[i][1], locations[i][0]

0 голосов
/ 30 января 2019

Попробуйте приведенный ниже код, который был размещен в Google Map v3 с несколькими маркерами 

<!DOCTYPE html>
<html> 
  <head> 
    <title>Google Map v3 With Multiple Markers & Info Windows</title> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false& libraries=places"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>  
    <script type="text/javascript" src="jquery.gmap3.min.js"></script>
  </head> 
  <body>
     <div id="map-canvas" style="width:100%;height:500px;"></div>
     <script type="text/javascript">
        var locations = [
          [1, 6.929537, 79.866271,'Maradana Railway'],
          [2, 6.933456, 79.850435,'Fort Railway'],
          [3, 6.931965, 79.846058,'Secretariat Railway']
        ];

        var map;
        var str = '[';
        for (i = 0; i < locations.length; i++) {
          str += '{ "lat" :"' + locations[i][1] + '","lng" :"' + locations[i][2] + '","data" :"<div class=Your_Class><h4><a href=Your_Link_To_Marker>' + locations[i][3] + '</a></h4></div>"},';
        }
        str = str.substring(0, str.length - 1);
        str += ']';
        str = JSON.parse(str);

        jQuery('#map-canvas').gmap3({
          marker: {
            values: str,
              options: {
                icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
                //icon: new google.maps.MarkerImage("marker.png"),
              },
              events: {
                click: function (marker, event, context) {
                  map = $(this).gmap3("get"),
                    infowindow = $(this).gmap3({ get: { name: "infowindow" } });
                  if (infowindow) {
                    infowindow.open(map, marker);
                    infowindow.setContent(context.data);
                  } else {
                    $(this).gmap3({
                    infowindow: {
                      anchor: marker,
                      options: { content: context.data }
                    }
                  });
                }
              },
            }
          },
          map: {
            options: {
              zoom: 14,
              scrollwheel: true,//Make It false To Stop Map Zooming By Scroll
              streetViewControl: true
            },
          },
        });
       </script> 
    </body>
</html>
...