带有多个标记和数字以及信息窗口的Google地图 [英] Google map with multiple markers and numbers and infowindow

问题描述

我想显示带有多个标记的地图，它应该在标记中显示数字，并在信息窗口中显示数组中的信息.

I want to display a map with multiple markers and it should display numbers in the marker and also an infowindow with info from the array.

它显示所有标记，但所有标记均为5，并在所有信息窗口中显示"Maroubra Beach". 信息窗口本身可以正常工作，即它会在每个标记上打开，但显示错误的文本！ 我不确定我在柜台做错什么！?由于它在所有标记中都显示5.

It shows all the markers but with the number 5 in all of them and it is displaying the "Maroubra Beach" in the info window on all. The info window itself, works as it should, that is that it opens on every marker as it should, but is displaying the wrong text! Im not sure what Im doing wrong with the counter!? Since it is displaying 5 in all markers.

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

    }

    }

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

Any input really appreciated, thanks!

好吧，除了蓝点不显示以外，这行得通吗?我显示的用户位置周围的圆圈，但不是蓝点?

Ok so this works, except for that the blue dots is not showing? The circle around the users location i showing, but not the blue dot?

推荐答案

使用匿名函数闭包(不是 have 是匿名的，命名函数也可以工作)来保持与地理编码请求(用于回调)和infowindow click事件处理程序(用于单击标记时使用).

Use anonymous function closure (doesn't have to be anonymous, named functions work as well) to keep the information associated with the geocode request (for use in the callback) and in the infowindow click event handler (for use when the marker is clicked).

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>

这篇关于带有多个标记和数字以及信息窗口的Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！