谷歌地圖信息窗口從另一個API調用

-2

我想將信息窗口放入Google地圖頁面。我正在使用API調用數據並使用markerclusterer.js插件。我已經看到了如何使用JSON對象或標記位於JavaScript文檔中，但我不知道如何將其應用於從另一個API調用。谷歌地圖信息窗口從另一個API調用

我在做什麼錯？你能解釋一下嗎？

HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>API Test</title> 
    <!--jQuery--> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <!-- Latest compiled and minified CSS --> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"rel="stylesheet"> 
<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<script src="http://maps.googleapis.com/maps/api/js"></script> 
<!--CSS--> 
<link href="style.css" rel="stylesheet" type="text/css"> 
<!--JavaScript--> 
<script src="script.js" type="text/javascript"> 
</script> 
<script src="markerclusterer.js" type="text/javascript"> 
</script> 
</head> 
<body> 
    <div class="container"> 
     <br> 
     <div id="content"> 
      <br> 
      <div id="googleMap"></div><br> 
      <footer id="footer"> 
       <p>Footer</p> 
      </footer> 
     </div> 
    </div> 
</body> 
</html>

CSS：

#content { 
    box-shadow: 5px 5px 10px 5px black; 
} 

#googleMap { 
    height: 400px; 
    width: 100%; 
    border: 1px solid black; 
}

的JavaScript：

var map; 
var MarkerClusterer; 
var marker; 
var mcOptions; 
var markers = []; 
$(document).ready(function() { 
    //Construct the query string 
    url ='https://opendata.howardcountymd.gov/resource/2rmt-d3f4.json?'; 
    + '$$app_token=3bEFB0E09z1w6zaJfAb6QqLsX'; 
    function initialize() { 
      var mapProp = { 
       center: new google.maps.LatLng(39.287346, -76.964306), 
       zoom: 8, 
       mapTypeId: google.maps.MapTypeId.TERRAIN 
      }; 
      map = new google.maps.Map(document.getElementById(
       "googleMap"), mapProp); 
      var infowindow = new google.maps.InfoWindow({ 
       content: "Hello World!" 
      }); 
      google.maps.event.addListener(markers, 'click', function() { 
       console.log("hello world") 
       infowindow.open(map, Markers); 
      }); 
     } 
     //google.maps.event.addDomListener(window, 'load', initialize); 
    initialize(); 
    //Retrieve our data and plot it 
    $.getJSON(url, function(data, textstatus) { 
     $.each(data, function(i, entry) { 
      //Cluster Markers 
      for (var i = 0; i < 50; i++) { 
       var entryMarkers = entry[i]; 
       var LatLng = new google.maps.LatLng(
        parseFloat(entry.coordinates.latitude), 
        parseFloat(entry.coordinates.longitude) 
       ); 
      } 
      var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(
        parseFloat(entry.coordinates 
         .latitude), 
        parseFloat(entry.coordinates 
         .longitude)), 
       map: map, 
       title: entry.file_name 
      }); 
      markers.push(marker); 
     }); 
     var markerCluster = new MarkerClusterer(map, markers); 
    }); 
    //info windows 
});

來源

2015-10-17 adin

你在哪裏設置地圖的大小？ – geocodezip

這是無效的：

google.maps.event.addListener(markers, 'click', function() { 
    console.log("hello world") 
    infowindow.open(map, Markers); 
});

事件偵聽器無法在數組上工作，需要逐個添加到每個標記（它適用於）。

您可以使用函數閉包將infowindow關聯到標記（以下示例使用createMarker函數）並使infowindow爲全局。注意你沒有有使用函數關閉還有其他方法可以解決這個問題。以下示例將entry.file_name放入infowindow中。

working fiddle

代碼片段：

var map; 
 
var MarkerClusterer; 
 
var marker; 
 
var mcOptions; 
 
var markers = []; 
 
var infowindow = new google.maps.InfoWindow({ 
 
    content: "Hello World!" 
 
}); 
 
$(document).ready(function() { 
 
    //Construct the query string 
 
    url = 'https://opendata.howardcountymd.gov/resource/2rmt-d3f4.json?' + '$$app_token=3bEFB0E09z1w6zaJfAb6QqLsX'; 
 

 
    function initialize() { 
 
     var mapProp = { 
 
     center: new google.maps.LatLng(39.287346, -76.964306), 
 
     zoom: 8, 
 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
 
     }; 
 
     map = new google.maps.Map(document.getElementById(
 
     "googleMap"), mapProp); 
 
    } 
 
    //google.maps.event.addDomListener(window, 'load', initialize); 
 
    initialize(); 
 
    //Retrieve our data and plot it 
 
    $.getJSON(url, function(data, textstatus) { 
 
    $.each(data, function(i, entry) { 
 
     createMarker(entry); 
 
    }); 
 
    var markerCluster = new MarkerClusterer(map, markers); 
 
    }); 
 
    //info windows 
 
}); 
 

 
function createMarker(entry) { 
 
    var marker = new google.maps.Marker({ 
 
    position: new google.maps.LatLng(
 
     parseFloat(entry.coordinates.latitude), 
 
     parseFloat(entry.coordinates.longitude)), 
 
    map: map, 
 
    title: entry.file_name 
 
    }); 
 
    markers.push(marker); 
 
    google.maps.event.addListener(marker, 'click', function() { 
 
    console.log("hello world"); 
 
    infowindow.setContent(entry.file_name + "<br>" + marker.getPosition().toUrlValue(6)); 
 
    infowindow.open(map, marker); 
 
    }); 
 
}

#input-area { 
 
    width: 100%; 
 
    border: 1px solid black; 
 
} 
 
#googleMap { 
 
    height: 400px; 
 
    width: 100%; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <br> 
 
    <div id="content"> 
 
    <br> 
 
    <div id="googleMap"></div> 
 
    <br> 
 
    <footer id="footer"> 
 
     <p>Footer</p> 
 
    </footer> 
 
    </div> 
 
</div>

來源

2015-10-17 18:46:40 geocodezip

'createMarker（）'函數有更多更好的文檔嗎？我在[標記文檔]（https://developers.google.com/maps/documentation/javascript/markers）或[信息窗口文檔]（https://developers.google.com/maps）上看不到它/ documentation/javascript/infowindows），我只在[地方搜索文檔]（https://developers.google.com/maps/documentation/javascript/examples/place-search）上看到了它。 – adin

這只是一個javascript函數，它創建一個標記並將infowindow的內容與其單擊監聽器相關聯。它不是Google Maps JavaScript API v3的一部分。 – geocodezip

如果我正在閱讀文檔以瞭解如何使用API，那麼如何才能知道在那裏使用JavaScript函數？或者將標記內容放在常規JavaScript函數中的語法是什麼？是否有其他文檔或這種情況下的教程？ – adin

谷歌地圖信息窗口從另一個API調用

回答

相關問題