2016-06-21 40 views
0

我正在實現一個應用程序,其中使用非常大的顯示屏,用戶可以選擇屏幕上顯示的幾個標記中的一個,並將其信息打印在infowindow上。 這種選擇可以在一個用例上使用Microsoft Surface進行。 雖然我遇到了以下問題。禁用或更改谷歌地圖api上位置的默認行爲3

This is what happens when the user touches the marker

And this is what happens when the user touches the location itself, not the marker

我推翻了標記的行爲,這樣

google.maps.event.addListener(marker, 'click', function() { 
    requestMarkerDetails(this); 
    infoWindow.open(map, this); 
}); 

而且

function requestMarkerDetails(mkr) { 
    var details_service = new google.maps.places.PlacesService(map); 
    details_service.getDetails({ 
     placeId: mkr.place.placeId 
    }, function (result, status) { 
     if (status != google.maps.places.PlacesServiceStatus.OK) { 
      alert(status); 
      return; 
     } 
     var contentStr = '<div id="bodyContent">' + '<font size = "12">' + 
       '<p>' + result.name + "<br>" + result.formatted_address + "<br>" + 
       result.formatted_phone_number + '</p>' + '</div>'; 

     infoWindow.setContent(contentStr); 
    }); 
} 

所以基本上我需要的是要麼做起來很攻圖標本身,而不是標記沒有或者我需要使它如此輕敲圖標才能帶來更大的infowindow,而不是默認的。

+1

它看起來並不容易解決。這是大約相同的問題。看看評論中的鏈接是否有助於http:// stackoverflow。com/questions/16417600/how-can-i-capture-the-click-event-when-a-default-marker-place-is-go-goog –

+0

感謝您的幫助,這實際上幫了很大的忙碌 –

+1

看看我更新的答案 –

回答

1

因此,我做了一些挖掘工作,感謝Emmanuel,他將我鏈接到this question,最終導致我到this issue。起初它似乎沒有希望,因爲谷歌已經標記爲「不會解決」。但我一直在閱讀,他們最終通過[編輯:允許我們在地圖上設置] clickableIconsfalse解決了它。

當然,我希望做的是實際上更改infoWindow,以便顯示我製作的較大窗口,並且僅禁用點擊它們。

1

這是我更新的答案。

所以我有5個火車站的標記。這些也是地圖上的默認標記。如果您點擊默認標記,腳本將會看到標記是否接近自定義標記。如果是,則默認的infoWindow將被關閉,而自定義的infoWindow將會出現。

因此,請嘗試點擊任何默認標記,沒有什麼不尋常的事情發生。 現在點擊自定義標記下的默認(藍色列車圖標)站標誌之一,看看會發生什麼

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 90%; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script> 
     var map; 
     // DATA 
     var stationsData =[ 
     {"name": "South", "position": [50.83644109999999,4.334787799999958], "content": "Brussels South Station"}, 
     {"name": "Chapelle", "position": [50.84125179999999,4.348515700000007], "content": "Brussels Chapelle Station"}, 
     {"name": "Central", "position": [50.8454658,4.3571134999999686], "content": "Brussels Central Station"}, 
     {"name": "Congres", "position": [50.85212929999999,4.361864999999966], "content": "Brussels Congres Station"}, 
     {"name": "North", "position": [50.8605262,4.36178730000006], "content": "Brussels North Station"} 
     ]; 
     var stationsMarkers = []; 
     var infowindow; 

     function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      center: new google.maps.LatLng(50.846624929308994,4.352617979049667), // Brussels 
      zoom: 14 
     }); 
     // add the markers 
     for(var i in stationsData) { 
      var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(stationsData[i].position[0], stationsData[i].position[1]), 
      title: stationsData[i].name, 
      map: map 
      }); 
      // store this object in stationsMarkers 
      stationsMarkers.push(marker); 
      // add a click event 
      google.maps.event.addListener(marker, 'click', function (e) { 
      // first we need to know whitch marker got clicked on 
      var index = stationsMarkers.indexOf(this); 
      setInfoWindow(index); 

      }); 
     } 

     initDetectClick(function(position, parentOfInfowindow) { 
      console.log(position.lat() +','+ position.lng()); 

      if(parentOfInfowindow) { 
       // We will search if this position is close to one of our markers. Let's say within 20 meter 
       // notice: we need &libraries=geometry in the script url, see below 
       for(var i in stationsMarkers) { 
       var distance = google.maps.geometry.spherical.computeDistanceBetween (position, stationsMarkers[i].getPosition()); 
       if(distance < 20) { 
        // open the correct infoWindow 
        setInfoWindow(i); 
        // we will induce a click on the close button of the default infowindow 
        // This way the infowindow is visible a few milliseconds, then disappears, every click on a POI 
        parentOfInfowindow.find('div>img').click(); 
        break; 
       } 
       } 
      } 
     }); 
     } 
     function setInfoWindow(index) { 
     // if needed, close the previous infoWindow 
     if(infowindow) { 
      infowindow.setMap(null); 
     } 
     // create the infoWindow 
     infowindow = new google.maps.InfoWindow({ 
      content: stationsData[index].content, 
      position: new google.maps.LatLng(stationsData[index].position[0], stationsData[index].position[1]), 
      map: map 
     }); 
     } 
    </script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&libraries=geometry" async defer></script> 
    <script> 
    var parentOfInfowindow; 
    var POI_hidden = false; 
    function initDetectClick(callback) { 
     //https://stackoverflow.com/questions/8902829/disable-click-behavior-of-poi-markers-in-google-maps-v3-6 
     //keep a reference to the original setPosition-function 
     var fx = google.maps.InfoWindow.prototype.setPosition; 
     //override the built-in setPosition-method 
     google.maps.InfoWindow.prototype.setPosition = function() { 
     //this property isn't documented, but as it seems 
     //it's only defined for InfoWindows opened on POI's 
     if (this.logAsInternal) { 
      if (this.getPosition()) { 
      console.log(this.getPosition()); 
      google.maps.event.trigger(map, 'click', {latLng: this.getPosition()}); 
      } 
      else{ 
      google.maps.event.addListener(this, 'map_changed', function (e) { // Once 
       console.log(this.getPosition()); 
       google.maps.event.trigger(map, 'click', {latLng: this.getPosition()}); 
       // //the infoWindow will be opened, usually after a click on a POI 
       //trigger the click 
       var removeInfoWindow = null; 
       var self = this; 
       // let's limit our 
       //console.log(jj); 
       if(POI_hidden) { 
        callback(self.getPosition()); 
       } 
       else { 
        removeInfoWindow = setInterval(function() { 
        if($('.gm-style-iw').parent().length) { 
         //console.log('clicked on POI @ ' + self.getPosition().lat() +''+ self.getPosition().lng()); // +e.latLng.toString() 
         parentOfInfowindow = $('.gm-style-iw').parent(); 
         clearInterval(removeInfoWindow); 
         // now we call the callback 
         callback(self.getPosition(), parentOfInfowindow); 
        }; 
        }, 5); 
       } 
      }); 
      }; 
     } 
     //call the original setPosition-method 
     fx.apply(this, arguments); 
     }; 

     google.maps.event.addListener(map,'click',function(e){ 
     //console.log('clicked on map @'+e.latLng.toString()); 
     callback(e.latLng); 
     }); 
    } 
    </script> 
    </body> 
</html> 

編輯:原來的答案

我那種需要這個自己。

我結合屯林周四的腳本,如下所示:Disable click behavior of POI markers in Google Maps JS API

我把它放在一個功能,改變了一些東西......

所以,用這種回調(第27行開始)您可以檢測地圖上或點(興趣點)上的點擊次數。

然後,您可以看到,如果任何標記接近該位置,在給定的回調,......它變得有點晚了,我來完成這個

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 90%; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script> 
     var map; 
     function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      center: new google.maps.LatLng(50.846624929308994,4.352617979049667), // Brussels 
      zoom: 14 
     }); 
     initDetectClick(function(position, parentOfInfowindow) { 
      console.log(position.lat() +','+ position.lng()); 

      if(parentOfInfowindow) { 
      // two choises. just comment out the solution you don't want. 

       // we will hide the infowindow, once and for all 
       // but then you will not detect further clicks on the POI 
      //parentOfInfowindow.hide(); 

       // we will induce a click on the close button of the infowindow 
       // This way the infowindow is visible a few milliseconds, then disappears, every click on a POI 
      parentOfInfowindow.find('div>img').click(); 
      } 
     }); 
     } 
    </script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" 
    async defer></script> 
    <script> 
    var parentOfInfowindow; 
    var POI_hidden = false; 
    function initDetectClick(callback) { 
     //https://stackoverflow.com/questions/8902829/disable-click-behavior-of-poi-markers-in-google-maps-v3-6 
     //keep a reference to the original setPosition-function 
     var fx = google.maps.InfoWindow.prototype.setPosition; 
     //override the built-in setPosition-method 
     google.maps.InfoWindow.prototype.setPosition = function() { 
     //this property isn't documented, but as it seems 
     //it's only defined for InfoWindows opened on POI's 
     if (this.logAsInternal) { 
      if (this.getPosition()) { 
      console.log(this.getPosition()); 
      google.maps.event.trigger(map, 'click', {latLng: this.getPosition()}); 
      } 
      else{ 
      google.maps.event.addListener(this, 'map_changed', function (e) { // Once 
       console.log(this.getPosition()); 
       google.maps.event.trigger(map, 'click', {latLng: this.getPosition()}); 
       // //the infoWindow will be opened, usually after a click on a POI 
       //trigger the click 
       var removeInfoWindow = null; 
       var self = this; 
       // let's limit our 
       //console.log(jj); 
       if(POI_hidden) { 
        callback(self.getPosition()); 
       } 
       else { 
        removeInfoWindow = setInterval(function() { 
        if($('.gm-style-iw').parent().length) { 
         // POI_hidden = true; 
         //alert($('.gm-style-iw').parent().length); 
         //console.log('clicked on POI @ ' + self.getPosition().lat() +''+ self.getPosition().lng()); // +e.latLng.toString() 
         parentOfInfowindow = $('.gm-style-iw').parent(); 
         //$('.gm-style-iw').parent().hide(); 
         //$('.gm-style-iw').parent().find('div>img').click(); 
         clearInterval(removeInfoWindow); 
         // now we call the callback 
         callback(self.getPosition(), parentOfInfowindow); 
        }; 
        }, 5); 
       } 
      }); 
      }; 
     } 
     //call the original setPosition-method 
     fx.apply(this, arguments); 
     }; 

     google.maps.event.addListener(map,'click',function(e){ 
     //alert('clicked @'+e.latLng.toString()) 
     //console.log('clicked on map @'+e.latLng.toString()); 
     //infowindow.setMap(null); 
     callback(e.latLng); 
     }); 
    } 
    </script> 
    </body> 
</html>