Question

我目前将谷歌地图集成到我的网站中。我在地图中有2个谷歌地图标记。

在鼠标悬停和鼠标移除时，这两个标记图像都会根据需要改变。这一切都在发挥作用。

我设置了一旦点击标记，页面网址就会更改并重新加载。这一切都很好。

我的问题是，当点击标记时，我希望我的谷歌标记图标也会改变。

所以要简单。

标记A =单击。

点击标记A的新页面加载。

标记A应在新页面上更改图标。

我希望我已经解释过这是一种直截了当的方式。这是我目前的代码。

  var iconBase = window.location.origin +   '/assets/images/map_red_small_full_icon.png';

var marker = new google.maps.Marker({
 position: {lat: 54.339549, lng: -5.266286},
 map: map,
 icon: iconBase
});  

marker.addListener('click', function() {
    window.history.pushState('obj', 'newtitle', '/locations#marker1');
    marker.setIcon(iconBasetitle);
    location.reload();
    $('body').scrollTop(0);
});

因此，根据单击标记的时间更改URL。加载新页面但标记不会更改。

任何人都可以解释我缺少的东西吗？

谢谢

Answer 1

我认为iconBasetitle是点击结婚时的新图标。

由于页面重新加载，整个脚本也会重新加载所以你的结婚被重置为原来的状态。

您只需在脚本中添加一些内容，即根据您在网址中添加的哈希值更改图标。

这样的事可能会这样做：

if(window.location.hash) {
    var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
    if(hash=="marker1"){
        marker.setIcon(iconBasetitle);
    }
}

谷歌地图标记改变OnClick

1 个答案: