Question

我正在尝试在gmap3中添加多个标记。但它行不通。如果有人知道如何在gmap3 API中添加多个位置。

var contactmap = {

         lat: 24.091328,
         lng: 38.037067
      };

      $('#tm-map')
         .gmap3({
            zoom: 13,
            center: contactmap,
            scrollwheel: false,
            mapTypeId: "shadeOfGrey",
            mapTypeControlOptions: {
               mapTypeIds: [google.maps.MapTypeId.ROADMAP, "shadeOfGrey"]
            }
         })

 .marker({
            position: contactmap,
            icon: 'assets/img/map-marker.gif'
         })

此代码仅查看一个标记。那么如何在地图中添加多个标记？

Answer 1

创建一个标记数组，然后将每个新的标记对象推入该数组，最后将数组传递到您的marker()中遵循此github响应https://github.com/jbdemonte/gmap3/issues/123 有关将来的任何问题，请参阅其github页面。

    // this is how you create array

    var multiadress = [{latLng:[1,2],content:"abcd"},{latLng:[3,4],content:"pqr"},{latLng:[6,7],content:"kbc"}] 
    var markers = [];
    $.each(multiadress, function(key, val){

                var latLng = val.latLng

                markers.push({
                    position: latLng,
                    content: val.content
                }); 
            });




    var contactmap = {

             lat: 24.091328,
             lng: 38.037067
          };

          $('#tm-map')
             .gmap3({
                zoom: 13,
                center: contactmap,
                scrollwheel: false,
                mapTypeId: "shadeOfGrey",
                mapTypeControlOptions: {
                   mapTypeIds: [google.maps.MapTypeId.ROADMAP, "shadeOfGrey"]
                }
             })

     .marker(markers)

接受答案是否有帮助。

Answer 2

所以最终我找到了适合自己的解决方案，非常感谢支持我。

var locations = [
  ['Yanbu Saudi Arabia', 24.091328, 38.037067, 1],
  ['Yanbu Saudi Arabia', 24.005421, 38.197395, 2]
];

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

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

var marker, i;
var markers = [];

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));
}

console.log(markers[0]);

Answer 3

您可以传递标记列表：

var markers = [
    { lat: 37.772, lng: -122.214 },
    { lat: 21.291, lng: -157.821 },
    { lat: -18.142, lng: 178.431 },
    { lat: -27.467, lng: 153.027 }
    ];

    function markerSetup(markers){

      var mapOptions = {
                    center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                    zoom: 10,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var icon = {
                    url: "../Content/Images/Car.png", // url
                    scaledSize: new google.maps.Size(50, 60), // scaled size
                    origin: new google.maps.Point(0, 0), // origin
                    anchor: new google.maps.Point(0, 0) // anchor
                };

                // alert(markers[0].lat)
                var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);


                var trafficLayer = new google.maps.TrafficLayer();
                trafficLayer.setMap(map);
                // map.setMap(trafficLayer);

                var infoWindow = new google.maps.InfoWindow();
                var lat_lng = new Array();
                var latlngbounds = new google.maps.LatLngBounds();
                for (i = 0; i < markers.length; i++) {
                    var data = markers[i]
                    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                    lat_lng.push(myLatlng);
                    var marker = new google.maps.Marker({
                        position: myLatlng,
                        icon: icon,
                        map: map,
                        title: data.title
                    });
                    latlngbounds.extend(marker.position);
                    (function (marker, data) {
                        google.maps.event.addListener(marker, "click", function (e) {
                            infoWindow.setContent(data.description);
                            infoWindow.open(map, marker);
                        });
                    })(marker, data);
                }
                map.setCenter(latlngbounds.getCenter());
                map.fitBounds(latlngbounds);
                map.setZoom(12)

            });
    }

这是可行的代码。希望对您有帮助。

Answer 4

我这样做是这样的：

$('#tm-map')
     .gmap3({
        zoom: 13,
        center: contactmap,
        scrollwheel: false,
        mapTypeId: "shadeOfGrey",
        mapTypeControlOptions: {
           mapTypeIds: [google.maps.MapTypeId.ROADMAP, "shadeOfGrey"]
        }
     })
     .marker(
       {position: [51.552970, 8.560290], icon: 'assets/img/map-marker.gif'},
       {position: [51.552970, 8.560290], icon: 'assets/img/map-marker.gif'},
       {position: [51.552970, 8.560290], icon: 'assets/img/map-marker.gif'},
       {position: [51.552970, 8.560290], icon: 'assets/img/map-marker.gif'}
     )

如何在Gmap3中添加多个标记？

4 个答案: