react-google-maps移动端Web应用：如何显示自定义颜色的用户位置标记？

嗨，我来帮你搞定这个需求！你遇到的问题主要是没在地图里添加标记用户位置的Marker组件，下面一步步来实现：

1. 导入必要组件 #

先确保你已经导入Marker组件，在文件顶部加上：

import { Marker } from 'react-google-maps';

2. 显示蓝色圆点标记用户位置 #

修改你的MapWithAMarker组件，在GoogleMap内部添加Marker，并通过icon属性设置蓝色圆点图标，这里提供两种实现方式：

方法一：使用Google Maps内置图标 #

直接用官方提供的蓝色圆点图标，简单快捷：

const MapWithAMarker = compose(
  withScriptjs,
  withGoogleMap
)((props) => (
  <GoogleMap
    center={{
      lat: parseFloat(props.currentLocation.lat),
      lng: parseFloat(props.currentLocation.lng)
    }}
    defaultZoom={15} // 放大比例更适合显示用户位置
    ref={map => (window.map = map)}
  >
    {/* 用户位置标记 */}
    <Marker
      position={{
        lat: parseFloat(props.currentLocation.lat),
        lng: parseFloat(props.currentLocation.lng)
      }}
      icon={{
        url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png",
        scaledSize: new window.google.maps.Size(30, 30) // 可自定义图标大小
      }}
    />
  </GoogleMap>
));

方法二：自定义SVG图标（样式更灵活） #

如果想完全控制圆点样式，用自定义SVG生成蓝色圆点：

<Marker
  position={{
    lat: parseFloat(props.currentLocation.lat),
    lng: parseFloat(props.currentLocation.lng)
  }}
  icon={{
    url: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2212%22%20fill%3D%22%234285F4%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%228%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E",
    scaledSize: new window.google.maps.Size(30, 30)
  }}
/>

3. 修改为红色圆点 #

要把图标改成红色超简单：

• 用内置图标的话，把图标URL换成红色版本："http://maps.google.com/mapfiles/ms/icons/red-dot.png"
• 用自定义SVG的话，把fill="#4285F4"改成fill="#DB4437"（Google Maps官方红色）或你喜欢的任意红色值：

<Marker
  position={{
    lat: parseFloat(props.currentLocation.lat),
    lng: parseFloat(props.currentLocation.lng)
  }}
  icon={{
    url: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2212%22%20fill%3D%22%23DB4437%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%228%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E",
    scaledSize: new window.google.maps.Size(30, 30)
  }}
/>

4. 修正原代码里的小细节 #

另外注意你原代码的几个小问题：

• render函数缺少return关键字，JSX无法正确返回
• MapWithAMarker的组件参数应该是props而非that，且函数体需要返回GoogleMap组件
• defaultCenter和center属性重复，保留一个即可

修正后的完整render示例：

render() {
  return (
    <div>
      <MapWithAMarker
        markers={this}
        currentLocation={this.props.currentLocation} // 确保传递用户位置属性
        googleMapURL="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=3.exp&libraries=geometry,drawing,places"
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `100vh` }} />}
        mapElement={<div style={{ height: `100%` }} />}
      />
    </div>
  );
}

这样就能完美显示用户当前位置的圆点，还能自由修改颜色啦！

内容的提问来源于stack exchange，提问作者Siddu hadapad