Question

我想在每个标记上添加一个侦听器来放大它。

        var markers = [
            ['SIÈGE SOCIAL - CENTRE DE SOPHIA ANTIPOLIS', 43.582079, 7.051295],
            ['CENTRE DE PARIS', 48.788109, 2.319764],
            ['CENTRE DE RENNES', 48.152474, -1.698386],
            ['CENTRE DE NANTES', 47.215383, -1.53688],
            ['CENTRE DE GRENOBLE', 45.192752, 5.712405],
            ['CENTRE DE LYON', 45.768857, 4.864911],
            ['CENTRE DE AIX-EN-PROVENCE', 43.496824, 5.346391],
            ['CENTRE DE TOULOUSE', 43.56867, 1.387412]
        ];

        for (i = 0; i < markers.length; i++) {

            var marker = new google.maps.Marker({
                position: {lat: markers[i][1], lng: markers[i][2]},
                title: markers[i][0],
                map: map
            });


            marker.addListener('click', function() {
                map.setZoom(8);
                map.setCenter(marker.getPosition());

            });


        }

但无论点击标记，地图都会以最后一个标记位置为中心。

['CENTRE DE TOULOUSE', 43.56867, 1.387412]

Answer 1

而不是使用map.setCenter(marker.getPosition());尝试使用map.setCenter(data.getPosition());来获取您点击的元素

Answer 2

最简单的解决方案是在标记点击事件监听器功能中使用this，该功能引用被点击的标记。

marker.addListener('click', function() {
  map.setZoom(8);
  map.setCenter(this.getPosition());
});

proof of concept fiddle

代码段

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var bounds = new google.maps.LatLngBounds();
  for (i = 0; i < markers.length; i++) {
    var marker = new google.maps.Marker({
      position: {
        lat: markers[i][1],
        lng: markers[i][2]
      },
      title: markers[i][0],
      map: map
    });
    bounds.extend(marker.getPosition());
    marker.addListener('click', function() {
      map.setZoom(8);
      map.setCenter(this.getPosition());
    });
  }
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var markers = [
  ['SIÈGE SOCIAL - CENTRE DE SOPHIA ANTIPOLIS', 43.582079, 7.051295],
  ['CENTRE DE PARIS', 48.788109, 2.319764],
  ['CENTRE DE RENNES', 48.152474, -1.698386],
  ['CENTRE DE NANTES', 47.215383, -1.53688],
  ['CENTRE DE GRENOBLE', 45.192752, 5.712405],
  ['CENTRE DE LYON', 45.768857, 4.864911],
  ['CENTRE DE AIX-EN-PROVENCE', 43.496824, 5.346391],
  ['CENTRE DE TOULOUSE', 43.56867, 1.387412]
];

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

Answer 3

尝试创建新标记时创建类似于类的函数

var arrayMarkers = [];

var markers = [
            ['SIÈGE SOCIAL - CENTRE DE SOPHIA ANTIPOLIS', 43.582079, 7.051295],
            ['CENTRE DE PARIS', 48.788109, 2.319764],
            ['CENTRE DE RENNES', 48.152474, -1.698386],
            ['CENTRE DE NANTES', 47.215383, -1.53688],
            ['CENTRE DE GRENOBLE', 45.192752, 5.712405],
            ['CENTRE DE LYON', 45.768857, 4.864911],
            ['CENTRE DE AIX-EN-PROVENCE', 43.496824, 5.346391],
            ['CENTRE DE TOULOUSE', 43.56867, 1.387412]
        ];

for(var i in markers) {
   var m = new MarkerC();
   m.create(map, markers[i][1], markers[i][2], markers[i][0]);
   arrayMarkers.push(m); 
}

function MarkerC(){
    this.marker;

    this.create = function (map, lat, lng, title){
        this.marker = new google.maps.Marker({
            position : {
                lat : Number(lat),
                lng : Number(lng)
            },
            map: map,
            title: title
          });

        google.maps.event.addListener(this.marker, "click", function(e) {
            map.setZoom(8);
            map.setCenter(this.marker.getPosition());

        });
    }

}

Google映射引用标记侦听器

3 个答案: