2016-06-21 47 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>