Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/23.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 谷歌地图标记大小与反应_Javascript_Reactjs_Google Maps_Google Maps React - Fatal编程技术网

Javascript 谷歌地图标记大小与反应

Javascript 谷歌地图标记大小与反应,javascript,reactjs,google-maps,google-maps-react,Javascript,Reactjs,Google Maps,Google Maps React,我目前正在使用GoogleMapsReact进行一个GoogleMaps项目,我遇到了一个问题。我正在使用道具获取标记的值(纬度、液化天然气、标记图标),但更改标记的大小时遇到问题。我留下了一个巨大的标记,无法改变这一点。我曾尝试将尺码作为道具传递,但没有成功。 提前感谢您的帮助 这是我的密码: MAPS.JS render() { /*--- initial code that i passed into props*/ /*var icon = { url: "h

我目前正在使用GoogleMapsReact进行一个GoogleMaps项目,我遇到了一个问题。我正在使用道具获取标记的值(纬度、液化天然气、标记图标),但更改标记的大小时遇到问题。我留下了一个巨大的标记,无法改变这一点。我曾尝试将尺码作为道具传递,但没有成功。
提前感谢您的帮助

这是我的密码:

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>
    );

scaledSize
参数必须与
url
参数一起添加到标记器的
图标
属性中,这与库和谷歌的一致

因此,如果此对象包含两个参数:

var icon = {
  url: "https://loc8tor.co.uk/wp-content/uploads/2015/08/stencil.png",
  scaledSize: new this.props.google.maps.Size(90, 42)
};
将它们作为对象一起传递到标记的
图标
属性,如下所示:

<Marker
  onClick={this.onMarkerClick}
  key={place.id}
  place_={place}
  position={{ lat: place.lat, lng: place.lng }}
  icon={icon}
/>


我已经使用上述更改测试了您的代码,并且您的蓝色标记以指定的大小正确显示。希望这对你有帮助

代码似乎不完整,我不得不做
icon={{{url:iconur,scaledSize:newwindow.google.maps.Size(90,42)}}
<Marker
  onClick={this.onMarkerClick}
  key={place.id}
  place_={place}
  position={{ lat: place.lat, lng: place.lng }}
  icon={icon}
/>