如何修改react-google-maps中地图标记的颜色/尺寸并实现随机颜色？

我来帮你搞定这个问题！在react-google-maps里修改标记的颜色、尺寸，还有给不同位置设置随机颜色其实很简单，核心是通过自定义Marker的icon属性来实现，结合你的代码我给你具体的方案：

1. 基础：修改标记的颜色和尺寸 #

react-google-maps的Marker组件支持通过icon属性自定义样式，主要有两种常用方式：

方式一：使用Google预设标记URL（快速简单） #

Google Maps提供了一系列预设颜色的标记图标，你可以直接通过URL调用，还能通过scaledSize调整尺寸：

const customMarkerIcon = {
  url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png", // 可选颜色：red、green、yellow、purple等
  scaledSize: new google.maps.Size(30, 30), // 设置标记宽高为30px
};

方式二：构建完整的Icon对象（更灵活） #

如果需要自定义图标、锚点等细节，可以构建google.maps.Icon对象：

const customIcon = {
  url: "path/to/your/custom-icon.png", // 可以用本地或在线自定义图标
  scaledSize: new google.maps.Size(40, 40), // 缩放后的显示尺寸
  anchor: new google.maps.Point(20, 40), // 标记锚点（对应地图上的定位点）
};

2. 实现随机颜色标记 #

接下来结合你的代码，给不同位置的标记设置随机颜色，分两步走：

步骤1：写一个随机颜色生成函数 #

你可以选两种方式，一种是生成任意十六进制颜色，另一种是从预设颜色列表里随机选（避免颜色太突兀）：

// 方法1：生成随机十六进制颜色
const getRandomHexColor = () => {
  const letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
};

// 方法2：从预设颜色列表随机选取
const presetColors = ["red", "blue", "green", "yellow", "purple", "orange", "pink"];
const getRandomPresetColor = () => {
  return presetColors[Math.floor(Math.random() * presetColors.length)];
};

步骤2：在你的地图组件中应用 #

假设你有一个存储位置信息的数组locations，循环渲染Marker时给每个标记分配随机颜色：

修改你的MyMapComponent代码如下：

const MyMapComponent = compose( 
  withProps({ 
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyB-lALSE8L0zgfk0vdt73gNTsfalkAggwY&v=3.exp&libraries=geometry,drawing,places", 
    loadingElement: <div style={{ height: "100%" }} />, 
    containerElement: <div style={{width:"100%", height: ht,}} />, 
    mapElement: <div style={{ height: "100%"}} />, 
  }), 
  withScriptjs, 
  withGoogleMap 
)((props) => (
  <GoogleMap
    defaultZoom={10}
    defaultCenter={{ lat: 你的纬度值, lng: 你的经度值 }}
  >
    {/* 循环渲染每个位置的标记 */}
    {props.locations.map((location, index) => {
      // 获取随机颜色（二选一）
      const randomColor = getRandomPresetColor(); 
      // const randomColor = getRandomHexColor();

      // 构建自定义标记样式
      const markerIcon = randomColor.startsWith('#') 
        ? // 如果是十六进制颜色，用SVG生成自定义标记
          {
            url: `data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><circle cx="15" cy="15" r="12" fill="${randomColor}" stroke="#fff" stroke-width="2"/></svg>`,
            scaledSize: new google.maps.Size(30, 30),
          }
        : // 如果是预设颜色，用Google的标记URL
          {
            url: `http://maps.google.com/mapfiles/ms/icons/${randomColor}-dot.png`,
            scaledSize: new google.maps.Size(30, 30),
          };

      return (
        <Marker
          key={index}
          position={{ lat: location.lat, lng: location.lng }}
          icon={markerIcon}
        />
      );
    })}
  </GoogleMap>
));

小提示 #

• 使用时记得把你的纬度值和你的经度值替换成实际的地图中心坐标，同时给MyMapComponent传递位置数组：<MyMapComponent locations={你的位置数组} />
• 如果用十六进制颜色，上面的SVG方案可以生成任意颜色的圆形标记，你也可以修改SVG代码自定义标记形状。

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