Как я могу открыть InfoWindow внутри собственного маркера кластера - Google Maps - PullRequest
Новая
       8

Как я могу открыть InfoWindow внутри собственного маркера кластера - Google Maps

0 голосов
/ 24 августа 2018 

function initMap() {
  var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: {
      lat: 37.773972,
      lng: -122.431297
    },
    gestureHandling: "greedy",
    disableDefaultUI: true
  });

  var labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
	var infoWin = new google.maps.InfoWindow();
  var markers = locations.map(function(location, i) {
    var htmlMarker = new HTMLMarker(location.lat, location.lng);
    	google.maps.event.addListener(htmlMarker, 'click', function(evt) {
			infoWin.setContent("Open my info window");
			infoWin.open(map, htmlMarker);

		});
    
    return htmlMarker;
  });
  
  
  var markerCluster = new MarkerClusterer(map, markers, {
    imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
  });
}
google.maps.event.addDomListener(window, 'load', initMap);
var locations = [{
    lat: 37.77,
    lng: -122.44
  },
  {
    lat: 37.78,
    lng: -122.45
  },
  {
    lat: 37.79,
    lng: -122.42
  },
  {
    lat: 37.72,
    lng: -122.43
  },
  {
    lat: 37.74,
    lng: -122.42
  },
  {
    lat: 37.75,
    lng: -122.41
  },
  {
    lat: 37.75,
    lng: -122.43
  },
  {
    lat: 37.79,
    lng: -122.43
  },
  {
    lat: 37.78,
    lng: -122.43
  }
];


function HTMLMarker(lat, lng) {
  this.lat = lat;
  this.lng = lng;
  this.pos = new google.maps.LatLng(lat, lng);
}
HTMLMarker.prototype = new google.maps.OverlayView();
HTMLMarker.prototype.onRemove = function() {
  if (this.div && this.div.parentNode && this.div.parentNode.removeChild)
    this.div.parentNode.removeChild(this.div);
}
HTMLMarker.prototype.getDraggable = function() {};
HTMLMarker.prototype.getPosition = function() {
  return this.pos
};

HTMLMarker.prototype.onAdd = function() {
  this.div = document.createElement('DIV');
  this.div.className = "htmlMarker";
  this.div.style.position = 'absolute';
  this.div.innerHTML = "$500";
  var panes = this.getPanes();
  panes.overlayImage.appendChild(this.div);
}

HTMLMarker.prototype.draw = function() {
  var overlayProjection = this.getProjection();
  var position = overlayProjection.fromLatLngToDivPixel(this.pos);
  var panes = this.getPanes();
  this.div.style.left = position.x + 'px';
  this.div.style.top = position.y + 'px';
}
html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.htmlMarker {
  background-color: black;
  border-radius: 50%;
  padding: 10px;
  color: white;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD4a6qqpfCMP8S31X6l3IKi5BLE7g3sbY4&callback=initMap"></script>

<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<div id='map'></div>

Я пытаюсь создать событие, открыв информационное окно внутри пользовательского маркера.

Я следую этому хорошему учебнику http://jsfiddle.net/geocodezip/psp42y7e/2/ и работает я создаю свой собственный маркер. Но проблема в том, что когда я попытался вызвать мою функцию и передать маркер в качестве аргумента, событие click не срабатывает.

Как открыть информационное окно внутри моего пользовательского маркера?

В этой части моего кода я попытался добавить информационное окно в свой собственный маркер кластера 

var infoWin = new google.maps.InfoWindow();
  var markers = locations.map(function(location, i) {
    var htmlMarker = new HTMLMarker(location.lat, location.lng);
        google.maps.event.addListener(htmlMarker, 'click', function(evt) {
            infoWin.setContent("Open my info window");
            infoWin.open(map, htmlMarker);

        });

    return htmlMarker;

function initMap() {
      var map = new google.maps.Map(document.getElementById("map"), {
        zoom: 12,
        center: {
          lat: 37.773972,
          lng: -122.431297
        },
        gestureHandling: "greedy",
        disableDefaultUI: true
      });

      var labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
      var infoWin = new google.maps.InfoWindow();
      var markers = locations.map(function(location, i) {
        var htmlMarker = new HTMLMarker(location.lat, location.lng);
            google.maps.event.addListener(htmlMarker, 'click', function(evt) {
                infoWin.setContent("Open my info window");
                infoWin.open(map, htmlMarker);

            });

        return htmlMarker;
      });


      var markerCluster = new MarkerClusterer(map, markers, {
        imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
      });
    }
    google.maps.event.addDomListener(window, 'load', initMap);
    var locations = [{
        lat: 37.77,
        lng: -122.44
      },
      {
        lat: 37.78,
        lng: -122.45
      },
      {
        lat: 37.79,
        lng: -122.42
      },
      {
        lat: 37.72,
        lng: -122.43
      },
      {
        lat: 37.74,
        lng: -122.42
      },
      {
        lat: 37.75,
        lng: -122.41
      },
      {
        lat: 37.75,
        lng: -122.43
      },
      {
        lat: 37.79,
        lng: -122.43
      },
      {
        lat: 37.78,
        lng: -122.43
      }
    ];


    function HTMLMarker(lat, lng) {
      this.lat = lat;
      this.lng = lng;
      this.pos = new google.maps.LatLng(lat, lng);
    }
    HTMLMarker.prototype = new google.maps.OverlayView();
    HTMLMarker.prototype.onRemove = function() {
      if (this.div && this.div.parentNode && this.div.parentNode.removeChild)
        this.div.parentNode.removeChild(this.div);
    }
    HTMLMarker.prototype.getDraggable = function() {};
    HTMLMarker.prototype.getPosition = function() {
      return this.pos
    };

    HTMLMarker.prototype.onAdd = function() {
      this.div = document.createElement('DIV');
      this.div.className = "htmlMarker";
      this.div.style.position = 'absolute';
      this.div.innerHTML = "$500";
      var panes = this.getPanes();
      panes.overlayImage.appendChild(this.div);
    }

    HTMLMarker.prototype.draw = function() {
      var overlayProjection = this.getProjection();
      var position = overlayProjection.fromLatLngToDivPixel(this.pos);
      var panes = this.getPanes();
      this.div.style.left = position.x + 'px';
      this.div.style.top = position.y + 'px';
    }

1 Ответ

0 голосов
/ 25 августа 2018

HTMLMarker, как написано, не обрабатывает события щелчка. Чтобы добавить обработку события щелчка, измените метод .onAdd, добавив прослушиватель события щелчка, который инициирует событие щелчка на объекте (и возвращает его положение как свойство события). 

HTMLMarker.prototype.onAdd = function() {
  this.div = document.createElement('DIV');
  this.div.className = "htmlMarker";
  this.div.style.position = 'absolute';
  this.div.style.cursor = 'pointer';
  this.div.innerHTML = "$500";
  var that = this;
  this.div.addEventListener("click", function(evt) {
    google.maps.event.trigger(that, 'click', {latLng: that.pos})
  })
  var panes = this.getPanes();
  panes.overlayImage.appendChild(this.div);
}

подтверждение концепции скрипки

screenshot of resulting map

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

.htmlMarker {
  background-color: black;
  border-radius: 50%;
  padding: 10px;
  color: white;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>
<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById("map"), {
      zoom: 12,
      center: {
        lat: 37.773972,
        lng: -122.431297
      },
      gestureHandling: "greedy",
      disableDefaultUI: true
    });

    var labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    var infoWin = new google.maps.InfoWindow();
    var markers = locations.map(function(location, i) {
      var htmlMarker = new HTMLMarker(location.lat, location.lng);
      google.maps.event.addListener(htmlMarker, 'click', function(evt) {
        console.log("htmlMarker click@" + evt.latLng.toUrlValue(6));
        infoWin.setContent("Open my info window<br>marker #" + i);
        infoWin.setOptions({
          pixelOffset: new google.maps.Size(20, 0)
        })
        infoWin.open(map, htmlMarker);

      });
      return htmlMarker;
    });


    var markerCluster = new MarkerClusterer(map, markers, {
      imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
    });
  }
  google.maps.event.addDomListener(window, 'load', initMap);
  var locations = [{
      lat: 37.77,
      lng: -122.44
    },
    {
      lat: 37.78,
      lng: -122.45
    },
    {
      lat: 37.79,
      lng: -122.42
    },
    {
      lat: 37.72,
      lng: -122.43
    },
    {
      lat: 37.74,
      lng: -122.42
    },
    {
      lat: 37.75,
      lng: -122.41
    },
    {
      lat: 37.75,
      lng: -122.43
    },
    {
      lat: 37.79,
      lng: -122.43
    },
    {
      lat: 37.78,
      lng: -122.43
    }
  ];


  function HTMLMarker(lat, lng) {
    this.lat = lat;
    this.lng = lng;
    this.pos = new google.maps.LatLng(lat, lng);
  }
  HTMLMarker.prototype = new google.maps.OverlayView();
  HTMLMarker.prototype.onRemove = function() {
    if (this.div && this.div.parentNode && this.div.parentNode.removeChild)
      this.div.parentNode.removeChild(this.div);
  }
  HTMLMarker.prototype.getDraggable = function() {};
  HTMLMarker.prototype.getPosition = function() {
    return this.pos
  };

  HTMLMarker.prototype.onAdd = function() {
    this.div = document.createElement('DIV');
    this.div.className = "htmlMarker";
    this.div.style.position = 'absolute';
    this.div.style.cursor = 'pointer';
    this.div.innerHTML = "$500";
    var that = this;
    this.div.addEventListener("click", function(evt) {
      console.log("click");
      google.maps.event.trigger(that, 'click', {
        latLng: that.pos
      })
    })
    var panes = this.getPanes();
    panes.overlayImage.appendChild(this.div);
  }

  HTMLMarker.prototype.draw = function() {
    var overlayProjection = this.getProjection();
    var position = overlayProjection.fromLatLngToDivPixel(this.pos);
    var panes = this.getPanes();
    this.div.style.left = position.x + 'px';
    this.div.style.top = position.y + 'px';
  }
  google.maps.event.addDomListener(window, 'load', initMap);
</script>
...