谷歌地图信息窗口从另一个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调用

回答

相关问题