如何更改 Google Maps API 绘图层控件中使用的默认标记

Question

我想知道如何将自定义标记与谷歌地图绘图控件一起使用。我想这样做是因为我需要在用户点击地图时放置一个标记并让它打开一个信息窗口（点击时）并在那里有一些自定义操作（按钮等）。

我为此使用 react 和 @react-google-maps/api，但这可能不是重点，因为它只是 Google 提供的 Maps Javascript API 的封装。

从docs 可以将google.maps.MarkerOptions 提供给google.maps.drawing.DrawingManagerOptions。不幸的是，没有提供自定义Marker 来呈现的选项。

我尝试使用google.maps.drawing.DrawingManager 公开的markercomplete() 回调，因为它具有新创建的Marker 作为参数，然后执行以下操作：

const handleNewMarker = (marker) => {
  marker.addListener('click', function() {
    setActiveMarker(marker);
  });
}

我的地图组件将是这样的：

<GoogleMap
  zoom={18}
  center={latLng}
>
  {activeMarker && <CustomInfoWindow anchor={activeMarker} />}
  <DrawingManager
    options={{
      markerOptions: {
        clickable: true,
        draggable: true,
      },
    }}
    onMarkerComplete={handleNewMarker}
  />
</GoogleMap>

虽然这行得通，但对于生产来说根本不可行，由于某种原因，InfoWindow 需要太多时间才能出现在屏幕上，这种方法可能会导致内存泄漏，我不知道为什么。

我可能在这里遗漏了一些东西，但在我的研究中，我没有发现一个人试图使用绘图工具创建自定义标记，只是自己自定义标记，这相对容易做到。我的理想情况是，因为我使用的是 React，所以创建一个 CustomMarker 组件，里面有一个 CustomInfoWindow，然后告诉绘图控件，“嘿，只要用户尝试使用这个标记，就可以使用它用你的绘图工具画一个新的标记”。

谢谢。

编辑

这是我的意思的屏幕截图，屏幕截图中的标记是使用“新标记”绘图控件放置在那里的，我需要“新标记”绘图控件来放置我定义的自定义标记。

Answer 1

如果我正确理解您对“自定义标记”的含义，您需要做的就是在MarkerOptions 中设置icon 属性。下面是一个使用 SVG 路径作为图标的示例。

这个 sn-p 是完整的 JS，但同样适用于 React 库。

var map;

function initialize() {

  var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8
  };

  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  var drawingManager = new google.maps.drawing.DrawingManager({

    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [google.maps.drawing.OverlayType.MARKER]
    },
    markerOptions: {
      draggable: false,
      icon: {
        path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
        fillColor: '#FF0000',
        fillOpacity: 0.6,
        anchor: new google.maps.Point(0, 0),
        strokeWeight: 0,
        scale: 1
      }
    }
  });

  drawingManager.setMap(map);
}

#map {
  height: 180px;
}

<div id="map"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&libraries=drawing" async defer></script>

现在，如果您需要可点击标记、拥有信息窗口等。您真的需要使用绘图管理器吗？你能不能简单地监听一个地图点击事件，并创建一个标准标记？

或者可能，两者都使用？ （使用绘图管理器创建标记并通过使用markercomplete 事件将其转换为标准标记，这似乎或多或少是您在做的事情。）

编辑：

如果您需要使用 InfoWindow 创建“真实”标记，可以在 markercomplete 事件中进行。

var map;
var infowindow;

function initialize() {

  var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8
  };

  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  infowindow = new google.maps.InfoWindow();

  var drawingManager = new google.maps.drawing.DrawingManager({

    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [google.maps.drawing.OverlayType.MARKER]
    }
  });

  drawingManager.setMap(map);

  google.maps.event.addListener(drawingManager, 'markercomplete', function(marker) {

    // Remove overlay from map
    marker.setMap(null); // Optional, but this will remove the drawn marker
    drawingManager.setDrawingMode(null); // Optional, but this will "disable" the drawing tools

    // Create the "real" marker
    createMarker(marker.getPosition());
  });
}

function createMarker(position) {

  var marker = new google.maps.Marker({
    position: position,
    map: map,
    title: 'Custom marker',
    icon: {
      path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
      fillColor: '#FF0000',
      fillOpacity: 0.6,
      anchor: new google.maps.Point(0, 0),
      strokeWeight: 0,
      scale: 1
    }
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent('This is the content');
    infowindow.open(map, this);
  });
}

#map {
  height: 180px;
}

<div id="map"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&libraries=drawing" async defer></script>