點擊谷歌地圖標記時運行腳本

我希望我的網站用戶能夠點擊Google地圖標記並將其重定向到與此標記相關的頁面。標記代表酒店，相關頁面顯示關於特定酒店的各種信息。此頁面是使用PHP調用SQL數據庫創建的，所以我不能簡單地將URL提供給標記，因爲它需要知道哪個酒店被點擊以使用relavent信息填充頁面。點擊谷歌地圖標記時運行腳本

是否可以在單擊標記而不是重定向到URL時運行腳本？這樣我就可以在腳本中使用PHP調用數據庫並創建頁面並加載它。我需要的只是從標記發送到腳本的一些（隱藏的）信息，這將確定哪些酒店標記已被點擊。

來源

2014-02-09 Giovanni

是的，可以在單擊標記時運行腳本。請參閱[文檔]（https://developers.google.com/maps/documentation/javascript/events） – geocodezip

我不確定要找到您。您的標記不知道他們代表哪個酒店，因此您必須查詢數據庫才能知道？ – sabotero

@sabotero使用SQL表中的緯度/經度數據生成標記。當他們被點擊時，我想回引用表格來檢索關於該特定酒店的其餘信息並將其顯示在單獨的網頁上。可行？ – Giovanni

我建議看看下面示例代碼中暴露的不同方法。

基本上你仍然可以從數據庫中獲取緯度/經度信息，但同時你會得到其他有用信息。

我模擬的例子中，我們從數據庫中獲取信息，通常情況下應該足夠了，但是您也可以獲得您可能需要的其他信息。

我們創建一個封裝所有信息的對象（MyMarker）和一個幫助管理多個對象的集合對象（MyMarkerCollection）。

然後，當您點擊標記時，您可以通過URL傳遞有用信息，並且您可以構建頁面，無需任何費用即可將一個查詢保存到服務器。

<!DOCTYPE html> 

<html> 
<head>  
    <title>Handling markers collection demo</title> 

    <style type="text/css"> 
     html 
     { 
      height: 100%; 
     } 
     body 
     { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 
     #map-container 
     { 
      height: 100%; 
      width: 100%; 
      min-width:500px; 
      min-height:300px; 
     } 
    </style> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>  

</head> 


<body> 
    <div id="map-container"></div> 

    <script type="text/javascript" language="javascript"> 

     var _map; 
     $(document).ready(function() { 
      var mapOptions = { 
       zoom: 4, 
       center: new google.maps.LatLng(-34.397, 150.644), 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
      _map = new google.maps.Map($("#map-container")[0], mapOptions); 

      Load1(); 
     }); 

     // information from data base 
     var points = [{lat:1.2345, lng: 3.45465, id: 1}, {lat:-1.45467, lng: 3.54645, id:2}, {lat:2.2345, lng: -4.45465, id:3}, {lat:-2.45467, lng:-4.54645, id:4}]; 

     //very little global variables (only what you really need to be global) 
     var MarkersCollection; 

     // the custom marker object with all what you need to show along with your marker 
     // and some methods in the prototype that help to manage the object 
     function MyMarker(point, id, info) { 
      //for the closure     
      var that = this; 
      that.id = id; 
      that.point = point; // your point 
      that.marker = new google.maps.Marker({ position: that.point }); 
      that.info = info; // other information if you need it 

      // add the listener to click 
      google.maps.event.addListener(that.marker, "click", function() { 
       // call onMarkerClick with variable 'that' being the local keyword 'this' within onMarkerClick method 
       that.onMarkerClick.call(that); 
      }); 
     } 
     MyMarker.prototype.addMarkerToMap = function (map) { 
      this.marker.setMap(map); 
     }; 
     // expose getPosition method 
     MyMarker.prototype.getPosition = function() { 
      return this.marker.getPosition(); 
     }; 
     MyMarker.prototype.onMarkerClick = function() { 
      //go to the url 
      window.location.href = 'http://yourhotels.com/hotel.php?id=' + this.id; 
      // or open link in a new window 
      window.open('http://yourhotels.com/hotel.php?id=' + this.id); 
     }; 
     MyMarker.prototype.removeMarkerFomMap = function() {    
      this.marker.setMap(null); 
     }; 

     // the collection of custom markers with the methos that help to manage the collection 
     function MyMarkerCollection() { 
      this.collection = []; 
     } 
     MyMarkerCollection.prototype.add = function (marker) { 
      this.collection.push(marker); 
     }; 
     MyMarkerCollection.prototype.removeAllMarkers = function() { 
      for (var i = 0; i < this.collection.length; i++) {     
       this.collection[i].removeMarkerFomMap(); 
      } 
     }; 
     MyMarkerCollection.prototype.focusAllMarkers = function() { 
      var bounds = new google.maps.LatLngBounds(); 
      for (var i = 0; i < this.collection.length; i++) { 
       bounds.extend(this.collection[i].getPosition()); 
      } 
      _map.fitBounds(bounds); 
     }; 


     // your load function 
     function Load(points) { 

      if (!MarkersCollection) { 
       MarkersCollection = new MyMarkerCollection(); 
      } 
      else { 
       MarkersCollection.removeAllMarkers(); 
      } 
      for (var i = 0; i < points.length; i++) { 
       var point = new google.maps.LatLng(points[i].lat, points[i].lng), 
        id = points[i].id; // the id 
       // create markers 
       var marker = new MyMarker(point, id, "your html"); 
       marker.addMarkerToMap(_map); 
       MarkersCollection.add(marker); 
      } 
      // focus all markers 
      MarkersCollection.focusAllMarkers(); 
     } 

     // for the demo sake 
     function Load1() { 
      Load(points); 
     } 
     function Remove(){ 
      if(MarkersCollection)MarkersCollection.removeAllMarkers(); 
     } 

    </script> 
</body> 
</html>

來源

2014-02-10 09:11:32 sabotero

點擊谷歌地圖標記時運行腳本

回答

相關問題