具有多个标记和数字以及信息窗口的 Google 地图

Question

我想显示一个带有多个标记的地图，它应该在标记中显示数字以及一个包含数组信息的信息窗口。

它显示了所有标记，但所有标记都带有数字 5，并且在所有信息窗口中都显示“Maroubra Beach”。 信息窗口本身可以正常工作，即它在每个标记上都按应有的方式打开，但显示的文本错误！ 我不确定我在柜台做错了什么！？因为它在所有标记中显示 5。

     var geocoder;
    var map;


    function initializemulti() {
//this is the geolocationmarker-compiled.js file

    (function() {var c=null,e;
    function f(b,a,d){var i={clickable:!1,cursor:"pointer",draggable:!1,flat:!0,icon:new google.maps.MarkerImage("https://google-maps-utility-library-v3.googlecode.com/svn/trunk/GeolocationMarker/images/gpsloc.png",new google.maps.Size(15,15),new google.maps.Point(0,0),new google.maps.Point(7,7)),optimized:!1,position:new google.maps.LatLng(0,0),title:"Current location",zIndex:2};a&&(i=g(i,a));a={clickable:!1,radius:0,strokeColor:"1bb6ff",strokeOpacity:0.4,fillColor:"61a0bf",fillOpacity:0.4,strokeWeight:1,
    zIndex:1};d&&(a=g(a,d));this.a=new google.maps.Marker(i);this.b=new google.maps.Circle(a);this.b.bindTo("center",this.a,"position");this.b.bindTo("map",this.a);b&&this.e(b)}e=f.prototype;e.c=c;e.a=c;e.b=c;e.g=function(){return this.c};e.h=function(){return this.c?this.a.getPosition():c};e.f=function(){return this.c?this.b.getBounds():c};e.i=function(){return this.c?this.b.getRadius():c};e.d=-1;
    e.e=function(b){if(this.c=b){var a=this,b={enableHighAccuracy:!0,maximumAge:1E3};navigator.geolocation&&(this.d=navigator.geolocation.watchPosition(function(d){var b=new google.maps.LatLng(d.coords.latitude,d.coords.longitude);a.b.setRadius(d.coords.accuracy);if(!a.a.getMap()||!b.equals(a.a.getPosition()))a.a.setPosition(new google.maps.LatLng(d.coords.latitude,d.coords.longitude)),a.a.setPosition(b),a.a.getMap()||a.a.setMap(a.c),google.maps.event.trigger(a,"position_changed",new h(b,a.b.getBounds(),
    d.coords.accuracy))},function(b){google.maps.event.trigger(a,"geolocation_error",b)},b))}else navigator.geolocation.clearWatch(this.d),this.d=-1,this.a.setMap(b)};e.k=function(b){this.a.setOptions(g({},b))};e.j=function(b){this.b.setOptions(g({},b))};function g(b,a){for(var d in a)j[d]||(b[d]=a[d]);return b}var j={map:!0,position:!0,radius:!0};function h(b,a,d){b&&(this.position=b);a&&(this.bounds=a);d&&(this.accuracy=d)}h.prototype.position=c;h.prototype.bounds=c;h.prototype.accuracy=c;f.prototype.getAccuracy=f.prototype.i;f.prototype.getBounds=f.prototype.f;f.prototype.getMap=f.prototype.g;f.prototype.getPosition=f.prototype.h;f.prototype.setCircleOptions=f.prototype.j;f.prototype.setMap=f.prototype.e;f.prototype.setMarkerOptions=f.prototype.k;window.GeolocationMarker=f;})()


     //alert("init");
    var locations = [
          ['Big Boys Grill & Bar', '<br />Kungsgatan 28, Varberg'],
          ['Black Pearl Varberg', '<br />Kungsgatan 13, Varberg'],
          ['Bruket', '<br />Birger Svenssons väg 16 E, Varberg'],
          ['Comwell Varbergs Kurort', '<br />Nils Kreugers väg 5, Varberg']
        ];

        var mapen = new google.maps.Map(document.getElementById('map_canvasmulti'), {
          zoom: 12,
          center: new google.maps.LatLng(57.111488,12.246623),
          //center: undefined,
          disableDefaultUI: true,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });


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

        //for displaying the current users location
         var GeoMarker = new GeolocationMarker();
            GeoMarker.setCircleOptions({fillColor: '#808080'});

            google.maps.event.addListenerOnce(GeoMarker, 'position_changed', function() {
             // mapen.setCenter(this.getPosition());
             // mapen.fitBounds(this.getBounds());
            });

            google.maps.event.addListener(GeoMarker, 'geolocation_error', function(e) {
              alert('There was an error obtaining your position. Message: ' + e.message);
            });

            GeoMarker.setMap(mapen);


        var  marker,i;
        var markers = [];

    var marker, i;

    for (i = 0; i < locations.length; i++) {
      var p = locations[i];

      geocoder.geocode({
        'address': locations[i][1]
      }, (function(i,p) {
        return function(results, status) {
          //alert(status);
          if (status == google.maps.GeocoderStatus.OK) {

            //alert(results[0].geometry.location);
            mapen.setCenter(results[0].geometry.location);
            marker = new google.maps.Marker({
              position: results[0].geometry.location,
              icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=' + ([i+1]) + '|FF776B|000000',
              map: mapen,
              title: p[2]
            });

            google.maps.event.addListener(marker, 'click', function() {
              infowindow.setContent(p[0] + p[1]);
              infowindow.open(mapen, this);
            });

            // google.maps.event.addListener(marker, 'mouseover', function() { infowindow.open(mapen, this);});
            google.maps.event.addListener(marker, 'mouseout', function() {
              infowindow.close();
            });

          } else {
            alert("some problem in geocode" + status);
          }
        };
      })(i,p));

    }

    }

非常感谢任何输入，谢谢！

好的，这样就可以了，只是没有显示蓝点？我显示的是用户位置周围的圆圈，但不是蓝点？

Answer 1

使用匿名函数闭包（必须是匿名的，命名函数也可以工作）以保持与地理编码请求相关的信息（用于回调）并在信息窗口中单击事件处理程序（在单击标记时使用）。

var locations = [
  ['Bondi Beach', '850 Bay st 04 Toronto, Ont'],
  ['Coogee Beach', '932 Bay Street, Toronto, ON M5S 1B1'],
  ['Cronulla Beach', '61 Town Centre Court, Toronto, ON M1P'],
  ['Manly Beach', '832 Bay Street, Toronto, ON M5S 1B1'],
  ['Maroubra Beach', '606 New Toronto Street, Toronto, ON M8V 2E8']
];

var mapen = new google.maps.Map(document.getElementById('map_canvas'), {
  zoom: 10,
  center: new google.maps.LatLng(43.253205, -80.480347),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

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

var marker, i;

for (i = 0; i < locations.length; i++) {
  var p = locations[i];

  geocoder.geocode({
    'address': locations[i][1]
  }, (function(i,p) {
    return function(results, status) {
      //alert(status);
      if (status == google.maps.GeocoderStatus.OK) {

        //alert(results[0].geometry.location);
        mapen.setCenter(results[0].geometry.location);
        marker = new google.maps.Marker({
          position: results[0].geometry.location,
          icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=' + ([i]) + '|FF776B|000000',
          map: mapen,
          title: p[2]
        });

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(p[0]);
          infowindow.open(mapen, this);
        });

        // google.maps.event.addListener(marker, 'mouseover', function() { infowindow.open(mapen, this);});
        google.maps.event.addListener(marker, 'mouseout', function() {
          infowindow.close();
        });

      } else {
        alert("some problem in geocode" + status);
      }
    };
  })(i,p));
}

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="width: 100%; height: 100%;"></div>

Answer 2

问题是您丢失了标记引用并且只保留最后一个（注意您的数组有 5 个元素），要保留它们，只需创建一个标记[] 数组来存储它们：

var markers = [];

然后在创建标记时将其添加到数组中

markers.push(marker);

你的代码会是这样的：

var locations = [
      ['Bondi Beach', '850 Bay st 04 Toronto, Ont'],
      ['Coogee Beach', '932 Bay Street, Toronto, ON M5S 1B1'],
      ['Cronulla Beach', '61 Town Centre Court, Toronto, ON M1P'],
      ['Manly Beach', '832 Bay Street, Toronto, ON M5S 1B1'],
      ['Maroubra Beach', '606 New Toronto Street, Toronto, ON M8V 2E8']
    ];

var mapen = new google.maps.Map(document.getElementById('map_canvas'), {
  zoom: 10,
  center: new google.maps.LatLng(43.253205,-80.480347),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

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

var  marker,i;
var markers = [];

for (i = 0; i < locations.length; i++) {
var p = locations[i];

geocoder.geocode( { 'address': locations[i][1]}, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) {

        mapen.setCenter(results[0].geometry.location);
        marker = new google.maps.Marker({
        position: results[0].geometry.location,
        icon:'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+ ([i]) +'|FF776B|000000',
        map: mapen,
        title: p[2]
     });


     google.maps.event.addListener(marker, 'click', function() {
         infowindow.setContent(p[0]);
         infowindow.open(mapen, this);
     });

     google.maps.event.addListener(marker, 'mouseout', function() { infowindow.close();});

     // insert created marker in the array
     markers.push(marker);

     }
     else
     {
         alert("some problem in geocode" + status);
     }
  }); 
}