当onmouseover div（谷歌地图v3 api）更改谷歌地图标记的图标时 [英] Change icon of google map marker when onmouseover div (Google maps v3 api)

问题描述

当我将鼠标悬停在div中的文本时，如何更改Google地图上的标记图标？我设法使用

  google.maps.event.addListener（marker1，）更改地图本身中marker的onmouseover标记图标鼠标悬停，功能（事件）{
 this.setIcon（http://chart.apis.google.com/chart?ch=&hl=zh-TW）; 
} 
  

编辑：

 函数初始化（）{
 .... 
 var marker1 = new google.maps.Marker（{
 
 position：new google.maps.LatLng（1.288693,103.846733），
 
 map：map，
 
图标：http://chart.apis.google.com/chart?ch=&hl=zh_TW
 $ b）; 
图标：http://chart.apis.google.com/chart?ch=?hl=zh_CN&chld=1|c41200|ffffff .. 
} 
 
 
函数changeMarker（marker）{
 
 alert（marker）; 
 
} 
  

和

 < div id =searchresultonmouseover =changeMarker（mark ER1）> 
  

我使用的是Chrome。在控制台中，onmouseover div我得到错误Uncaught ReferenceError：marker1未定义

解决方案

将onmouseover属性添加到div。
$ b

  function changeMarker（marker）{
 var icon = new Google.maps.MarkerImage （{url：http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ffffff|c41200}）; 
 marker.setIcon（icon）; 
} 
  

您的div可能如下所示：

 < div onmouseover =changeMarker（marker1）> 
  

然而，我会建议缓存MarkerImage（因为它看起来非常静态），所以Google不需要继续重新生成图形图像。

您可以设置图像的其他属性。请参阅文档

How do i change the icon of a marker on google maps when I mouseover the text in a div? I managed to change the marker icon onmouseover the marker in the map itself using

google.maps.event.addListener(marker1, "mouseover", function(event) {
            this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ffffff|c41200");
}

EDIT:

Here is what I have now:

function initialize(){
....
var marker1 = new google.maps.Marker({  

            position: new google.maps.LatLng(1.288693,103.846733),

            map: map,

            icon: "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|c41200|ffffff"

        }); 
....
}


function changeMarker(marker) {

            alert(marker);

    }

and

<div id="searchresult" onmouseover="changeMarker(marker1)">

I'm using Chrome. In the console, onmouseover the div I get the error "Uncaught ReferenceError: marker1 is not defined"

解决方案

Add a onmouseover property to the div. Let's say it was called changeMarker.

function changeMarker(marker) {
    var icon = new Google.maps.MarkerImage({ url:"http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ffffff|c41200"});
    marker.setIcon(icon);
}

Your div could then look like:

<div onmouseover="changeMarker(marker1)">

I would recommend however caching the MarkerImage (since it seems pretty static) so that Google doesn't need to keep regenerating the graph image.

You can set other properties of the image. See the documentation

这篇关于当onmouseover div（谷歌地图v3 api）更改谷歌地图标记的图标时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！