有没有办法在谷歌地图的叠加层上方添加标记反应？

Posted 2023-03-28

【中文标题】有没有办法在谷歌地图的叠加层上方添加标记反应？

【英文标题】：Is there any way to add markers above overlay in google maps react?

【发布时间】：2022-01-07 23:00:07

【问题描述】：

我正在尝试在地图上方添加叠加层并将标记放置在叠加层上方。但我不能这样做。我该怎么做？我正在使用 google-maps-react 库作为依赖项。

<div>
    <Map
      key=active
      google=google
      containerStyle=containerStyle
      zoom=5
      disableDefaultUI
      initialCenter=
        lat: markers[0].position.lat,
        lng: markers[0].position.lng,
      
    >
      <div className="absolute top-0 bottom-0 right-0 left-0 bg-gray-400 pointer-events-none" />
      <Marker
        title="The marker`s title will appear as a tooltip."
        name="SOMA"
        position= lat: 37.778519, lng: -122.40564 
      />
    </Map>
  </div>

the view right now

【参考方案1】：

您可以使用 Google Maps javascript API 的 GroundOverlay object 来完成此操作。但是您需要获取 google-maps-react 代码中使用的当前地图对象，然后您将使用它来将叠加层设置到此地图参考中。

请参阅下面的sample code 和代码 sn-p：

import React,  Component  from 'react';
import  Map, GoogleApiWrapper, Marker  from 'google-maps-react';

const mapStyles = 
  width: '100%',
  height: '100%',
;

const imageBounds = 
  north: 40.773941,
  south: 40.712216,
  east: -74.12544,
  west: -74.22655,
;

class MapWithOverlay extends Component 
  mapRef = (ref) => 
    let historicalOverlay = new google.maps.GroundOverlay(
      'https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg',
      imageBounds
    );
    historicalOverlay.setMap(ref.map);
  ;

  render() 
    return (
      <>
        <div>
          <Map
            ref=(ref) => 
              this.mapRef(ref);
            
            google=this.props.google
            zoom=12
            style=mapStyles
            initialCenter= lat: 40.74, lng: -74.18 
          >
            <Marker position= lat: 40.74, lng: -74.18  />
          </Map>
        </div>
      </>
    );
  


export default GoogleApiWrapper(
  apiKey: 'YOUR_KEY',
)(MapWithOverlay);