使用 .json 文件中的数据填充 gmaps infowindows

HCI 发表于 Dev

人机交互

我目前有一个地图项目，它根据存储在 json 文件中的纬度和经度数据生成标记和集群。我正在尝试使用其他数据填充信息窗口的内容，这些数据也存储在 json 文件中。有没有一种简单的方法可以调整我现有的代码以适应这种情况？

当前代码：

<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>

许多 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"}

在当前代码中，我包含了 json 文件中的字段，我想在其中包含数据。例子：'<p><b>Owner: </b> owner_id</p>' +

当然，如果我只是在这些字段中输入一些文本，它将为地图上显示的每个标记显示相同的信息窗口。我希望这些对于标记来说是独一无二的。

伊曼纽尔延迟

是的，您有 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

我没有测试过。让我知道它是否有效

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。