在 Google Maps API V3 中单击时更改 KML 地标图标答案

【问题标题】：Changing KML Placemark icons on click in Google Maps API V3在 Google Maps API V3 中单击时更改 KML 地标图标
【发布时间】：2011-04-22 12:50:18
【问题描述】：

我正在尝试在我正在处理的示例地图应用程序中更改 KML 叠加层的 KML 地标图标。

这是示例代码 -

function seekml() {

var myLatlng = new google.maps.LatLng(40.65, -73.95);
var myOptions = {
    zoom: 14,
    mapTypeControl: true,
    center: myLatlng,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
     position: google.maps.ControlPosition.TOP_RIGHT
    },
    navigationControl: true,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
url_end = "?nocache=" + (new Date()).valueOf(); //For No KML Caching 
myKML = "http://kmlscribe.googlepages.com/SamplesInMaps.kml" + url_end

gMap = new google.maps.Map(document.getElementById("map"), myOptions);
var ctaLayer = new google.maps.KmlLayer(myKML,{suppressInfoWindows: true});
ctaLayer.setMap(gMap);

google.maps.event.addListener(ctaLayer, 'click', function(event) {              
    this.setIcon(gYellowIcon);
  });
}

gYellowIcon 之前已经在我的代码中定义过 -

var gYellowIcon = new google.maps.MarkerImage(
  "image url",
  new google.maps.Size(31, 31),
  new google.maps.Point(0, 0),
  new google.maps.Point(6, 20));

当用户单击 KML 叠加层上显示的任何地标时，我想更改 KML 叠加层地标。上面的代码不起作用。

【问题讨论】：

我正要问同样的问题...
大家好，你们终于找到解决这个问题的方法了吗？谢谢

标签： google-maps-api-3 kml

【解决方案1】：

我目前正在处理完全相同的事情，就我而言，我可以直接编辑 KML 文件。如果您可以访问它并且可以对其进行编辑，那么这就是我所做的：

1) 在<document> 标签下，粘贴如下内容：

<Style id="desired_id">
  <IconStyle>
    <Icon>
      <href>http://www.yourwebsite.com/your_preferred_icon.png</href>
      <scale>1.0</scale>
    </Icon>    
  </IconStyle>
</Style>

目前，Google 地图不支持 scale 参数。您可以在此处查看 Google 地图中所有支持的 KML 元素：

http://code.google.com/intl/en-EN/apis/kml/documentation/kmlelementsinmaps.html

在这里，您可以获得一些关于 KML 和 GMaps 之间兼容性的信息：

http://code.google.com/intl/en-EN/apis/kml/documentation/mapsSupport.html

2) 一旦你定义了你的风格，你可以通过添加以下内容在每个地标项目上引用它：

<styleUrl>#desired_id</styleUrl>

现在，您的所有地标都应该显示您的自定义图标。

希望对你有帮助。

编辑：对不起，我没有看到点击部分。这不是你所需要的。我会留下它以防它帮助别人。很抱歉。

【讨论】：