렌더링 요소를 GoogleMaps 인포 박스에 적용 - 클릭 연결을 중지합니다.

Question

React 애플리케이션의 Google지도 인포 박스에 문제가 있습니다. 내 목표는 Google지도 인스턴스에서 빈 InfoBox를 연 다음 ReactDOM.render를 사용하여 내부 컴포넌트를 배치하는 것입니다. 구성 요소는 탭 집합으로 구성되며 각 탭 창은 열 때 redux 및 thunk를 통해 API 호출을합니다.

이 모든 것이 정상적으로 작동하며 멋지게 표시됩니다. 문제는 InfoBox를 실제로 클릭하면 발생합니다.

1. enableEventPropagation = TRUE : 구성 요소 작품, 모든 탭과 버튼, 그러나 어떤 마커 아래에 내 인포 박스가 될 것입니다 나는 참 또는 거짓하기 위해 enableEventPropagation을 변경하여이 두 가지 방법 중 하나를 작동시킬 수 있습니다 InfoBox의 오른쪽 부분을 클릭하면 응용 프로그램의 상태와 흐름이 완전히 끊어집니다.

2. enableEventPropagation = false : 클릭이지도로 전달되지 않지만 반응 요소의 클릭 이벤트가 작동하지 않습니다. 탭 없음, 버튼 없음 : 없음 좋아 보이지만 전혀 작동하지 않습니다. 나는 다음과 같은 솔루션을 시도

   renderInfoBox() { 
       let {map, google, infoBox} = this.props; 
       let markerElement = MarkerElementService.getMarkerElement(infoBox.ui.markerId); 
   
       this.infoBox = new this.infoBoxClass({ 
        content: this.refs.infoBoxHolder, 
        enableEventPropagation: false, 
        pixelOffset: new google.maps.Size(10, -275), 
        maxWidth: 350, 
        zIndex: 99999999, 
        infoBoxClearance: new google.maps.Size(75, 75) 
       }); 
   
       ReactDOM.render(
        <Provider store={AppStore}> 
         <ThemeProvider theme={Theme}> 
          <InfoBoxComponent google={google} onClose={this.closeButtonClicked.bind(this)} /> 
         </ThemeProvider> 
        </Provider>, 
        this.refs.infoBoxHolder, 
        () => { 
         this.infoBox.open(map, markerElement); 
        } 
       ); 
   } 
   
   render() { 
       return (
        <div ref="infoBoxHolder" /> 
       ); 
   } 
   

   :

   • Google지도 오버레이 스와핑

은 여기 내 인포 박스를 만들고 ReactDOM으로 렌더링을위한 내 코드입니다. 똑같은 문제는 사실 InfoBox가 InfoBox 애드온을 보았을 때 OverLay에 대한 래퍼이며 이러한 문제 중 일부를 제거하는 데 도움이되지만 여전히 비 대화식 일 것이라고 가정합니다.

내 구성 요소 내부의 다양한 지점에서 이벤트 전파를 사용하지 않도록 설정했지만 효과는 하위 구성 요소가 작동하지 않음을 의미하는 DOM 트리 아래로 이벤트 전파를 사용하지 않도록 설정합니다. 미친!

내 유일한 옵션 왼쪽이 렌더링 한 후 순차적으로 그 지역에있는 모든 마커를 사용하지 됐어요 일단 어떻게 든 인포 박스의 위도/LNG의 경계를 계산하는 것 같다,하지만 내가 원하는 말도 해키 부하의 피하기 위해!

아니면 완전히 잘못된 접근 방식이 있습니까?

Answer 1

시도 할 수있는 몇 가지 사항이 있습니다.

먼저 마커가 많지 않은 경우 마커 optimized을 false으로 설정하십시오. DOM 요소를 별도의 DOM 요소로 렌더링하므로 성능이 저하되지만 경험하는 것과 같은 이상한 동작은 발생하지 않습니다.

정상 마커로 문제를 재현 할 수는 없지만 기본적으로 추가 된 POI의 POI로 할 수있었습니다. InfoBox 뒤의 마커가 열리지 않게하려면 InfoBox의 InfoBox에서 및 leave에 리스너를 만들어 부울을 설정하고 InfoWindow의 set 메서드를 재정 의하여 기본 동작을 취소합니다. 마우스 커서는 계속 변경되지만 기본 CSS를 사용하여 제거 할 수 있습니다.

예를 들어, 마커를 클릭 한 후 Sechelt Aquatic Center 아이콘을 클릭하여 InfoxBox를 열면이 기능을 사용할 수 없습니다.

function initialize() { 
 

 
    let enableMarkers = true 
 
    
 
    const set = google.maps.InfoWindow.prototype.set; 
 
    google.maps.InfoWindow.prototype.set = function (key, val) { 
 
    if (key === 'map') { 
 
     if (!enableMarkers) { 
 
     return 
 
     } 
 
    } 
 
    set.apply(this, arguments) 
 
    } 
 

 
    const map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 15, 
 
    center: new google.maps.LatLng(49.47216, -123.76307), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    }) 
 

 
    const marker = new google.maps.Marker({ 
 
    map, 
 
    draggable: true, 
 
    position: new google.maps.LatLng(49.47216, -123.76307), 
 
    visible: true 
 
    }) 
 

 
    const box = document.createElement('div') 
 
    box.innerHTML = 'Hello <br> Hello <br> Hello' 
 

 
    google.maps.event.addListener(marker, 'click', function (e) { 
 
    if (!enableMarkers) { return } 
 
    ib.open(map, this) 
 
    }) 
 

 
    const ib = new InfoBox({ 
 
    content: box, 
 
    zIndex: 10, 
 
    pixelOffset: new google.maps.Size(-100, 0), 
 
    boxStyle: { 
 
     background: 'white', 
 
     padding: '5px', 
 
     opacity: 0.75, 
 
     width: '200px', 
 
    }, 
 
    closeBoxMargin: '2px', 
 
    closeBoxURL: 'https://www.google.com/intl/en_us/mapfiles/close.gif', 
 
    isHidden: false, 
 
    enableEventPropagation: true, 
 
    }) 
 
    
 
    box.addEventListener('mouseenter',() => { 
 
    enableMarkers = false 
 
    }) 
 
    
 
    box.addEventListener('mouseleave',() => { 
 
    enableMarkers = true 
 
    }) 
 
}

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script> 
 
<script src="https://rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script> 
 

 
<body onload="initialize()"> 
 
    <div id="map" style="width: 100%; height: 200px"></div> 
 
</body>

나는 또한 사람들이 문제의 같은 종류를 가지고 자신의 클릭을 바인딩 시작 인포 박스 domready 이벤트를 기다려야했다 몇 곳에서 보았다. 실제로 당신이 어떻게 반응을 사용하여 그것을 할 수 있었는지는 알 수 없지만 여전히 유의할만한 가치가 있다고 생각하지 마십시오.