英文:
Google Maps AdvancedMarker hover listener function not working
问题
我已经创建了一个函数，用于在地图上放置一个标记数组。我已经为所有标记添加了一个点击函数，该函数会将地图重新定位到新位置并进行适当的缩放。这部分功能没有问题。
上面的mouseover事件监听器不起作用，我无法弄清楚原因。我是否忽略了什么？
function setMarker(loc,pos){pos = { lat: pos['lat'], lng: pos['lng'] };let marker = new AdvancedMarkerElement({map: map,position: pos,title: loc});google.maps.event.addListener(marker, 'mouseover', function() {console.log('Marker has been moused over.');});google.maps.event.addListener(marker, 'click', function() {map.panTo({ lat: jp[loc]['lat'], lng: jp[loc]['lng']} );animZoom(jp[loc]['zoom']);$location = loc;});}
英文:
I have created a function that places an array of pins on a map. I have already added a click function to all markers that re-centers the map on the new location and zooms to the appropriate. This part works without issue.
The mouseover event listener above it will not work & I can't figure out why. Is there something I'm overlooking?
function setMarker(loc,pos){pos = { lat: pos['lat'], lng: pos['lng'] };let marker = new AdvancedMarkerElement({map: map,position: pos,title: loc});google.maps.event.addListener(marker, 'mouseover', function() {console.log('Marker has been moused over.');});google.maps.event.addListener(marker, 'click', function() {map.panTo({ lat: jp[loc]['lat'], lng: jp[loc]['lng']} );animZoom(jp[loc]['zoom']);$location = loc;});}
答案1
得分: 3
我明白了。在设置标记后，创建一个事件监听器，以目标为 marker.content 对象，代码如下：
marker.content.addEventListener('mouseenter', function(){console.log('鼠标进入');});marker.content.addEventListener('mouseleave', function(){console.log('鼠标离开');});
如果你想为动画添加自定义的 CSS（例如悬停效果、过渡等），你可以直接针对标记的类进行样式设置，而无需通过 JavaScript 手动操作：
.GMAMP-maps-pin-view { transition: all 0.25s linear; }.GMAMP-maps-pin-view:hover { transform: scale(1.5); }
英文:
I figured it out. After setting the marker, create an event listener targeting the marker.content object like so:
marker.content.addEventListener('mouseenter', function(){console.log('mouse enter');});marker.content.addEventListener('mouseleave', function(){console.log('mouse leave');});
If you're wanting to add custom CSS for animation (e.g. hover effects, transitions, etc.), you can target the marker class itself without having to do it all manually via JavaScript:
.GMAMP-maps-pin-view { transition: all 0.25s linear; }.GMAMP-maps-pin-view:hover { transform: scale(1.5); }
答案2
得分: 0
显然，你需要通过添加一个Google Maps事件监听器来使标记可点击，像这样（可以为空）：
marker.addListener("click", () => {});
这将使标记可交互，并且所有其他鼠标事件都将起作用。@henken的答案在我尝试之前对我不起作用。
顺便说一下，我正在使用React组件作为标记，现在也可以使用事件处理程序作为props：
const content = document.createElement("div");const root = createRoot(content);root.render(<Marker />);const marker = new google.maps.marker.AdvancedMarkerElement({position,content,map,});marker.addListener("click", () => {});
const Marker = () => {return (<div onMouseEnter={() => console.log("It works!")}>...</div>)}
英文:
Apparently you have to make the marker clickable by adding a Google Maps event listener like this (it can be empty):
marker.addListener("click", () => {});
This will make the marker interactable and all other mouse events will work. The answer by @henken didn't work for me until I did this.
Btw I'm using a React component as the marker, and event handlers as props work too now:
const content = document.createElement("div");const root = createRoot(content);root.render(<Marker />);const marker = new google.maps.marker.AdvancedMarkerElement({position,content,map,});marker.addListener("click", () => {});
const Marker = () => {return (<div onMouseEnter={() => console.log("It works!")}>...</div>)}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论