我目前正在使用 google-maps-react 开发 google-maps 项目,但遇到了问题。我正在使用 props 来获取标记的值(纬度、经度、标记图标),但是我在更改标记的大小时遇到问题。我留下了一个巨大的标记,无法改变这一点。我尝试将尺寸作为 Prop 传递,但没有成功。
预先感谢您的帮助。
这是我的代码:
MAPS.JS
render() {
/*--- initial code that i passed into props*/
/*var icon = {
url: "https://loc8tor.co.uk/wp-content/uploads/2015/08/stencil.png", // url
scaledSize: new this.props.google.maps.Size(90, 42), // scaled size
*/
}
return (
<div className="map-container">
<Map
google={this.props.google}
className={"map"}
zoom={4}
initialCenter={this.props.center}
>
{this.props.places.map((place, i) => {
//pass an array of markers as a child to the GoogleMap component and map over them
return (
<Marker
onClick={this.onMarkerClick}
key={place.id}
place_={place}
position={{ lat: place.lat, lng: place.lng }}
icon={place.url}
//Size={place.scaledSize} : Not working
/>
);
})}
<InfoWindowEx
marker={this.state.activeMarker}
visible={this.state.showingInfoWindow}
>
<div>
<h3>{this.state.selectedPlace.name}</h3>
<button
type="button"
onClick={this.showDetails.bind(this, this.state.selectedPlace)}
>
Show details
</button>
</div>
</InfoWindowEx>
</Map>
</div>
);
INDEX.JS
import React from "react";
import ReactDOM from "react-dom";
import Map from "./Map";
import "./styles.css";
const data = [
{
name: "Hello",
title: "Sydney",
lat: -33.847927,
lng: 150.6517938,
id: 1,
color: "blue",
url: "https://loc8tor.co.uk/wp-content/uploads/2015/08/stencil.png",
// scaledSize: Size(90, 42), // scaled size - Not working//
},
{
最佳答案
必须按照库的 docs 将 scaledSize
参数与 url
参数一起添加到标记的 icon
属性中。和谷歌的docs .
因此,如果您的对象包含两个参数:
var icon = {
url: "https://loc8tor.co.uk/wp-content/uploads/2015/08/stencil.png",
scaledSize: new this.props.google.maps.Size(90, 42)
};
将它们作为对象一起传递到标记的 icon
属性,如下所示:
<Marker
onClick={this.onMarkerClick}
key={place.id}
place_={place}
position={{ lat: place.lat, lng: place.lng }}
icon={icon}
/>
我已经使用上述更改测试了您的代码,并且您的蓝色标记以指定的大小正确显示。希望这对您有所帮助!
关于javascript - 谷歌地图标记大小与 react ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58558202/