首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何减小google-maps-react中标记的自定义图标大小?

如何减小google-maps-react中标记的自定义图标大小?
EN

Stack Overflow用户
提问于 2018-12-27 14:57:00
回答 2查看 6.3K关注 0票数 0

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

但是,无论我怎么尝试,它都不会反映出来。那么,你能帮我找出我哪里做错了吗?

代码语言:javascript
复制
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

EN

回答 2

Stack Overflow用户

发布于 2018-12-27 20:30:04

代码语言:javascript
复制
<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
EN

Stack Overflow用户

发布于 2018-12-27 18:30:27

通过使用缩放,我们减小了图标的大小。

代码语言:javascript
复制
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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53940969

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档