javascript - Google Maps API - 有关悬停/URL 点击的问题

Question

我正在尝试设置 Google map 实例，在其中我可以将标记图标在悬停时更改为更大的图像。我正在数组中加载较大的图像，然后尝试将这些值传递到回调事件函数中。由于某种原因，我只在悬停时显示默认 map 标记，而不是图像。

您可以在下面使用“testVar”看到我在哪里执行此操作。

https://jsfiddle.net/sj1zv02a/

for (i = 0; i < locations_programs.length; i++) {
    var id = 'programs' + i;

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations_programs[i][1], locations_programs[i][2]),
        map: map,
        id: id,
        icon: 'http://www.christielakekids.com/_images/new/blue_circle.png',
        url: locations_programs[i][5],
        image: locations_programs[i][4],
        zIndex: 100
    });

    var testVar = locations_programs[i][4];


    google.maps.event.addListener(marker, 'mouseover', function (event, testVar) {
        this.setIcon(testVar);
    });

    google.maps.event.addListener(marker, 'mouseout', function (event) {
        this.setIcon('http://www.christielakekids.com/_images/new/blue_circle.png');
    });

我还想知道如何将 URL 附加到较大的图像，以便在单击时它将重定向到那里。我在标记代码中设置了“URL”参数，但这似乎没有任何作用。

Answer 1

我找到了这个解决方案(该示例仅适用于//**** 程序，但可以轻松扩展到其他部分。 JSFiddle for test

以及更好解释的代码

在标记属性中添加一个 altIcon 属性并为其分配您需要的图像。 在鼠标悬停监听器中使用 this.setIcon(this.altIcon)

设置图标

marker = new google.maps.Marker({
  position: new google.maps.LatLng(locations_programs[i][1], locations_programs[i][2]),
   map: map
  ,id: id
  ,icon: 'http://www.christielakekids.com/_images/new/blue_circle.png'
  ,url: locations_programs[i][5]
  ,image: locations_programs[i][4]
  ,zIndex:100
  ,altIcon: locations_programs[i][4]
});



  google.maps.event.addListener(marker, 'mouseover', function(event) {
      this.setIcon(this.altIcon);
  });

我在数组中显示图像时遇到了一些困难。 (该网站说找不到文件)所以在 jsfiddle 中我使用了不同颜色的图标。