如何使用Google Maps Javascript API在多边形顶部添加标记? [英] How to add markers on top of a polygon using Google Maps Javascript API?

问题描述

我正在使用Google Maps Javascript API，并且已经定义了一个多边形并将其附加到地图上:

I'm using the Google Maps Javascript API, and I've defined a polygon and attached it to a map:

const region = new google.maps.Polygon({
  map: map,
  paths: [
    { lat: 40.5577151228437, lng: -74.15980859374997 },
    { lat: 40.599436503265856, lng: -74.27516503906247 },
    { lat: 40.67030312529891, lng: -74.25319238281247 },
    { lat: 40.72548139969253, lng: -74.26079167357881 },
  ],
});

我有一个单击处理程序，可以在用户单击时在其上添加标记:

I have a click handler that adds a marker on it when the user clicks:

  google.maps.event.addListener(map, 'click', function (e) {
    const marker = new google.maps.Marker({
      map: map,
      position: e.latLng,
    });
  });

当我单击多边形的外部区域时，我会看到标记，但是当我单击多边形的内部时，我看不到标记.

I see the marker when I click on areas outside of the polygon, but I don't see the marker when I click inside the polygon.

我已经尝试对每个zIndex进行硬编码，但是没有运气.有什么想法吗?

I've tried hard-coding a zIndex on each, but no luck. Any ideas?

推荐答案

两个选项:

1. 将点击侦听器添加到多边形

google.maps.event.addListener(region, 'click', function (e) {
    const marker = new google.maps.Marker({
      map: map,
      position: e.latLng,
    });
  });

概念提琴证明

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
    });
  const region = new google.maps.Polygon({
    map: map,
    paths: [
      { lat: 40.5577151228437, lng: -74.15980859374997 },
      { lat: 40.599436503265856, lng: -74.27516503906247 },
      { lat: 40.67030312529891, lng: -74.25319238281247 },
      { lat: 40.72548139969253, lng: -74.26079167357881 },
    ],
  });
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < region.getPath().getLength(); i++) {
    bounds.extend(region.getPath().getAt(i));
  }
  map.fitBounds(bounds);

  function addMarker(e) {
    const marker = new google.maps.Marker({
      map: map,
      position: e.latLng,
    });
  }
  google.maps.event.addListener(map, 'click', addMarker);
  google.maps.event.addListener(region, 'click', addMarker);
}
google.maps.event.addDomListener(window, "load", initialize);

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>

1. 使多边形不捕获点击(可点击:false)；

const region = new google.maps.Polygon({
  map: map,
  clickable: false,
  paths: [
    { lat: 40.5577151228437, long: -74.15980859374997 },
    { lat: 40.599436503265856, long: -74.27516503906247 },
    { lat: 40.67030312529891, long: -74.25319238281247 },
    { lat: 40.72548139969253, long: -74.26079167357881 },
  ],
}

概念提琴证明

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
    });
  const region = new google.maps.Polygon({
    map: map,
    clickable: false,
    paths: [
      { lat: 40.5577151228437, lng: -74.15980859374997 },
      { lat: 40.599436503265856, lng: -74.27516503906247 },
      { lat: 40.67030312529891, lng: -74.25319238281247 },
      { lat: 40.72548139969253, lng: -74.26079167357881 },
    ],
  });
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < region.getPath().getLength(); i++) {
    bounds.extend(region.getPath().getAt(i));
  }
  map.fitBounds(bounds);
  google.maps.event.addListener(map, 'click', function(e) {
    const marker = new google.maps.Marker({
      map: map,
      position: e.latLng,
    });
  });
}
google.maps.event.addDomListener(window, "load", initialize);

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>

这篇关于如何使用Google Maps Javascript API在多边形顶部添加标记?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！