【问题标题】:How to reduce the size of custom icon of marker in google-maps-react?如何减小 google-maps-react 中标记的自定义图标的大小?
【发布时间】:2018-12-27 06:57:00
【问题描述】:

所以,我一直在尝试减小在谷歌地图中使用的自定义标记的大小。我确实找到了一些与减小大小相关的属性,即https://developers.google.com/maps/documentation/javascript/reference/marker#Icon

但是,尽管我尝试了很多,但它不会反映。那么,你能帮我确定我在哪里做错了吗?

import React, { Component } from 'react';
import { Map, Marker, GoogleApiWrapper } from 'google-maps-react';
import logo from './pins/Minigrid_RMS_Absent.png'
const mapStyles = {
  width: '100%',
  height: '100%'
};

export class MapContainer extends Component {
  constructor(props){
  super(props)
  this.onMarkerClick=this.onMarkerClick.bind(this)
}
onMarkerClick(){
  console.log('called:')
}
render() {
return (
  <Map
    google={this.props.google}
    zoom={5}
    style={mapStyles}
    initialCenter={{
     lat: 21.5937,
     lng: 78.9629
    }}
  >
  <Marker key='0' icon={{
    url: logo,
    scaledSize:  this.props.google.maps.Size(15,25)
  }} position={{lat: 21.5937, lng: 78.9629}} onClick={this.onMarkerClick}  
/>
  </Map>
);
}
}

export default GoogleApiWrapper({
 apiKey: 'MYKEY'
})(MapContainer);

因此,希望能帮助您指出错误。谢谢。

Here is the current icon size

【问题讨论】:

    标签: reactjs google-maps-react


    【解决方案1】:
    <Marker key='0' icon={{
    url: logo,
    scaledSize:  new this.props.google.maps.Size(15,25)
    }} position={{lat: 21.5937, lng: 78.9629}} onClick={this.onMarkerClick}  
    />
    

    找到丢失的单词。它的new

    【讨论】:

      【解决方案2】:

      通过使用比例,我们减小了图标的大小。

      import { withGoogleMap, GoogleMap, Marker } from "react-google-maps";
      
       var iconPin = {
              path: 'M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z',
              fillColor: '#64be67',
              fillOpacity: 1,
              scale: 0.05, //to reduce the size of icons
             };
      
      
       <GoogleMap zoom={3}>
          <Marker key={marker.id}
                  position={{ lat: marker.latitude, lng: marker.longitude}}
                  icon={iconPin} />
       </GoogleMap>
      

      【讨论】:

      • 在生成无效规范错误时给出比例。 InvalidValueError: setIcon: in property scaledSize: not a Size: not an Object
      猜你喜欢
      • 2013-09-14
      • 1970-01-01
      • 2020-10-29
      • 1970-01-01
      • 2016-06-13
      • 1970-01-01
      • 2020-05-10
      • 2016-12-28
      • 2017-04-10
      相关资源
      最近更新 更多