使用.json文件中的数据填充gmaps信息窗口
[英]Populating gmaps infowindows with data from .json file
问题描述
i currently have a maps project which generates markers and clusters from latitude and longitude data stored in a json file. 
我目前有一个maps项目，该项目从存储在json文件中的纬度和经度数据生成标记和聚类。 I am trying to populate the contents of the infowindow with other data, also stored in the json file. 我试图用其他数据（也存储在json文件中）填充信息窗口的内容。 Is there a simple way of adjusting my existing code to accommodate this? 有没有一种简单的方法可以调整我现有的代码以适应这种情况？
The current code: 当前代码：
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="data.json"></script>
<script type="text/javascript" src="markerclusterer.js"></script>
<script>
function initialize() {
var center = new google.maps.LatLng(34.777491, 64.5852620);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
for (var i = 0; i < 100; i++) {
var dataPhoto = data.photos[i];
var infoWin = new google.maps.InfoWindow();
var latLng = new google.maps.LatLng(dataPhoto.latitude,
dataPhoto.longitude);
var marker = new google.maps.Marker({
position: latLng,
icon: "images/gps.svg"
});
(function(m, infoWindow, idx) {
google.maps.event.addListener(m, 'click', function(evt) {
infoWindow.setContent('<p style="color:#008ae6;"><b>Header</b></p><p><b>ID:</b> photo_id</p>' +
'<p><b>Owner: </b> owner_id</p>' +
'<p><b>Upload Date:</b> upload_date</p>' +
'<button type="button" class="btn btn-primary btn-sm"><i class="fa fa-bar-chart"></i>Button 1</button> ' + idx);
infoWindow.open(map, m);
})
})(marker, infoWin, i);
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'images/m'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12846745-20']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' === document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
<body>
<div id="map-container"><div id="map"></div></div>
</body>
Example of one of the many json fields: 许多json字段之一的示例：
{"photo_id": 57819, "photo_title": "Burg Hohenwerfen", "photo_url": "http://www.panoramio.com/photo/57819", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/57819.jpg", "longitude": 13.189259, "latitude": 47.483221, "width": 500, "height": 333, "upload_date": "05 October 2006", "owner_id": 8060, "owner_name": "Norbert MAIER", "owner_url": "http://www.panoramio.com/user/8060"}
In the current code I have included fields from the json file where I would like to include the data. 在当前代码中，我包括了要包含数据的json文件中的字段。 Example: '<p><b>Owner: </b> owner_id</p>' + 例如： '<p><b>Owner: </b> owner_id</p>' +
Of course, if I were to just enter some text in these fields it would display the same infowindow for every marker shown on the map. 当然，如果我只是在这些字段中输入一些文本，它将为地图上显示的每个标记显示相同的信息窗口。 I would like these to be unique to the marker. 我希望这些标记是唯一的。
1 个解决方案
解决方案1
0 已采纳 2018-02-23 13:03:51
Yes, you have idx, which is the index on the item in the json data. 是的，您有idx，它是json数据中项目的索引。
(function(m, infoWindow, idx) {
google.maps.event.addListener(m, 'click', function(evt) {
var content = '<h3>' + data.photos[idx].photo_title + '</h3> <img src="' + data.photos[idx].photo_url + '">';
// etcetera. format like you need it
infoWindow.setContent(content);
infoWindow.open(map, m);
})
}) (marker, infoWin, i) ;; the i of the for-loop becomes idx in the on-marker-click event
I haven't tested it. 我还没有测试。 Let me know if it works 让我知道是否有效
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.