在 google-map-react 中向 Google 地图添加标记 [英] Adding Marker to Google Maps in google-map-react

问题描述

我正在使用 google-map-react用于创建 Google 地图和多个标记的 NPM 包.

问题:我们如何将默认的 Google 地图标记添加到地图?

从这个 Github issue 看来，我们需要访问使用 onGoogleApiLoaded 函数的内部 Google 地图 API.

参考 Google Maps JS API 文档中的示例，我们可以使用下面的代码来渲染标记，但是我们如何定义对map的引用?

var 标记 = new google.maps.Marker({位置:myLatLng，地图:地图，标题:世界你好！"});

当前代码:

renderMarkers() {...}使成为() {返回 (<div style={{'width':800,'height':800}}><谷歌地图bootstrapURLKeys={{key: settings.googleMapApiKey}}默认缩放={13}默认中心={{纬度:this.props.user.profile.location.coordinates[1],lng: this.props.user.profile.location.coordinates[0]}}onGoogleApiLoaded={({map, maps}) =>this.renderMarkers()}yesIWantToUseGoogleMapApiInternals></谷歌地图>

);}

解决方案

由于此答案已发布，GoogleMapReact 元素的文档(可能还有 API)已更改为支持子元素.任何具有 lat 和 lng 的孩子都将在地图上的相应位置呈现，正如@Jobsamuel 的回答所示.

onGoogleApiLoaded 回调不应用于此目的，因为它不如声明式样式，并且如果对地图进行更改，则不会重新运行.

---

原始答案(过时):

从自述文件中的描述可能并不完全清楚，但 maps 参数实际上是地图 API 对象(当然，map 是，当前的谷歌地图实例).因此，您应该将两者都传递给您的方法:

onGoogleApiLoaded={({map, maps}) =>this.renderMarkers(地图，地图)}

并使用它们:

renderMarkers(map, maps) {让标记=新的maps.Marker({位置:myLatLng，地图，标题:世界你好！"});}

I am using the google-map-react NPM package to create a Google Map and several markers.

Question: How can we add the default Google Maps markers to the map?

From this Github issue, it seems that we need to access the internal Google Maps API using the onGoogleApiLoaded function.

Referring to an example from the Google Maps JS API docs, we can use the following code to render the marker, but how do we define the references to map?

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
});

Current Code:

renderMarkers() {
    ...
}

render() {
    return (
        <div style={{'width':800,'height':800}}>
            <GoogleMap
                bootstrapURLKeys={{key: settings.googleMapApiKey}}
                defaultZoom={13}
                defaultCenter={{ 
                    lat: this.props.user.profile.location.coordinates[1], 
                    lng: this.props.user.profile.location.coordinates[0]
                }}
                onGoogleApiLoaded={({map, maps}) => this.renderMarkers()}
                yesIWantToUseGoogleMapApiInternals
            >
            </GoogleMap>
        </div>
    );
}

解决方案

Edit:
Since this answer was posted the docs (and likely, the API) of the GoogleMapReact element was changed to support children. Any child with lat and lng would be rendered at the corresponding location on the map, as also indicated by @Jobsamuel's answer.

The onGoogleApiLoaded callback should not be used for this purpose, as it is inferior to the declarative style and would not be re-run if changes are made to the map.

---

Original answer (outdated):

This may not be entirely clear from the description in the Readme, but the maps argument is, in fact, the maps API object (and map is, of course, the current Google Map instance). Therefore, you should pass both to your method:

onGoogleApiLoaded={({map, maps}) => this.renderMarkers(map, maps)}

and use them:

renderMarkers(map, maps) {
  let marker = new maps.Marker({
    position: myLatLng,
    map,
    title: 'Hello World!'
  });
}

这篇关于在 google-map-react 中向 Google 地图添加标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！