Google지도의 다각형에 대한 툴팁

내 애플리케이션의 다양한 지역 및 상태에 대한 다각형이 있습니다. 마커는 title 속성을 사용하여 툴팁을 구현합니다. 마우스 오버시 및 다각형 위로 마우스 아웃하면 이벤트가 발생할 수 있습니다. 마커에 대해 구현 된 툴팁처럼 보이는 툴팁을 어떻게 만들 수 있습니까?Google지도의 다각형에 대한 툴팁

편집 - 1 : 다각형을 작성하고 처리기를 연결하여 도구 설명을 표시/숨기기위한 코드를 추가하십시오.

function addPolygon(points) { 
    var polygon = new google.maps.Polygon({ 
     paths: points, 
     strokeColor: " #FFFFFF", 
     strokeOpacity: 0.15, 
     strokeWeight: 1.5, 
     fillColor: "#99ff66", 
     fillOpacity: 0.14 
    }); 
    var tooltip = document.createElement('div'); 
    tooltip.innerHTML = "Alok"; 

    google.maps.event.addListener(polygon,'mouseover',function(){ 
     tooltip.style.visibility = 'visible'; 
    }); 
    google.maps.event.addListener(polygon,'mouseout',function(){ 
     tooltip.style.visibility = 'hidden'; 
    }); 
    polygon.setMap(map); 
}

출처

2010-11-29 Alok Swain

가능한 복제 (https://stackoverflow.com/questions/5112867/google-maps-v3-polyline-tooltip) –

는 당신이 다각형 마우스 오버 이벤트가 나는 표시 발생할 때 내가 마우스 position.Then을 기록 할 수 있도록 내가 내가 페이지에 마우스 이동 이벤트를 부착 구현 한 페이지를 yourself.In해야 할 것 같아요

Polygon tooltip

그것이

출처

2010-11-29 09:34:51

나는 이런 것을 시도했다. 내 접근 방식은 다음과 같습니다. 1. mouseover 및 mouseout 이벤트가 있습니다. 2. div를 만들고 mouserover 이벤트에 표시하고 mouseout 이벤트에 숨겼습니다. 이것은 나를 위해 작동하지 않았다. –

코드를 게시하면 오류의 출처를 파악할 수 있습니다. –

나는 그것을 질문에 편집에 넣을 것이다. –

다음과 같은

//Add a listener for the click event 
google.maps.event.addListener('click', showArrays); 
infoWindow = new google.maps.InfoWindow;

을 시도 할 수 있습니다 희망 마우스 위치 근처의 사용자 정의 DIV

16,다음 클릭 이벤트는 다음과 같은 기능

function showArrays(event) { 

    var contentString = 'Content here'; 

    // Replace the info window's content and position. 
    infoWindow.setContent(contentString); 
    infoWindow.setPosition(event.latLng); 

    infoWindow.open(map); 
}

출처

2015-10-08 23:46:05 kcode

Google지도에서이 (이상한) 제한을 해결하는 깔끔한 트릭이 실제로있다에게 전화 일어날 때. 마우스를 데이터 항목 위로 가져 가면지도의 <div>에 툴팁을 추가하기 만하면됩니다. 마우스 포인터가 현재있는 위치에 추가됩니다 - 항목 바로 위에 있습니다!

map.data.addListener('mouseover', mouseOverDataItem); 
map.data.addListener('mouseout', mouseOutOfDataItem));

...

function mouseOverDataItem(mouseEvent) { 
    const titleText = mouseEvent.feature.getProperty('propContainingTooltipText'); 

    if (titleText) { 
    map.getDiv().setAttribute('title', titleText); 
    } 
} 

function mouseOutOfDataItem(mouseEvent) { 
    map.getDiv().removeAttribute('title'); 
}

[구글은 V3의 폴리 라인 툴팁 매핑]의

출처

2017-12-14 16:59:06

Google지도의 다각형에 대한 툴팁

답변

관련 문제