谷歌地球 API 在鼠标悬停时更改地标图像

Google Earth API change placemark image on mouseover

本文关键字：图像 API 鼠标 悬停 谷歌地球      更新时间：2023-09-26

我正在尝试在鼠标悬停时更改地标图像。下面是鼠标悬停事件处理程序：

function changePlacemark(e){
    e.preventDefault();
    this.getStyleSelector().getIconStyle().getIcon().setHref('myImageURL');
}

问题在于，当函数运行时，它确实会更改图像，但它也会完全重置地标，导致它再次执行缩放动画，就像将全新的地标添加到地图中一样。

有没有办法防止这种情况发生？我只想改变图像，而不是重置地标。有点破坏了体验。

当然，您可以使用样式在 KML 中或通过 API 创建翻转图标。您只需要设置要素的样式，而无需更新图标的 href 属性。

在 API 中：

  var style = ge.createStyle("");
  style.getIconStyle().getIcon().setHref('myImageURL');
  feature.setStyleSelector(style);

在 KML 中：

  <Document>
    <Style id="highlightPlacemark">
      <IconStyle>
        <Icon>
          <href>http://maps.google.com/mapfiles/kml/paddle/red-stars.png</href>
        </Icon>
      </IconStyle>
    </Style>
    <Style id="normalPlacemark">
      <IconStyle>
        <Icon>
          <href>http://maps.google.com/mapfiles/kml/paddle/wht-blank.png</href>
        </Icon>
      </IconStyle>
    </Style>
    <StyleMap id="exampleStyleMap">
      <Pair>
        <key>normal</key>
        <styleUrl>#normalPlacemark</styleUrl>
      </Pair>
      <Pair>
        <key>highlight</key>
        <styleUrl>#highlightPlacemark</styleUrl>
      </Pair>
    </StyleMap>
    <Placemark>
      <name>Roll over this icon</name>
      <styleUrl>#exampleStyleMap</styleUrl>
      <Point>
        <coordinates>-122.0856545755255,37.42243077405461,0</coordinates>
      </Point>
    </Placemark>
  </Document>
相关文章：