从 JSON 填充 Google 地图标记

Question

我是 jQuery Mobile 初学者，我正在尝试从 JSON 文件中读取数据并在 Google 地图标记中填充信息（例如坐标）。

此代码运行良好，但未填充任何标记。任何人都可以帮助我发现 JSON 问题？

$(document).on("pageinit", "#agents", function () {
    var defaultLatLng = new google.maps.LatLng(-25.975769, 32.582499); // Default
    if (navigator.geolocation) {
        function success(pos) {
            // Location found, show map with these coordinates
            drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
        }

        function fail(error) {
            drawMap(defaultLatLng); // Failed to find location, show default map
        }
        // Find the users current position.  Cache the location for 5 minutes, timeout after 6 seconds
        navigator.geolocation.getCurrentPosition(success, fail, {
            maximumAge: 500000,
            enableHighAccuracy: true,
            timeout: 6000
        });
    } else {
        drawMap(defaultLatLng); // No geolocation support, show default map
    }

    function drawMap(latlng) {
        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);


        //READ FROM JSON
        $.getJSON('data/agents.json', function (data) {
            $.each(data.markers, function (i, marker) {
                var marker = new google.maps.Marker({
                    position: Marker.LatLng(marker.latitude, marker.longitude),
                    map: map,
                    title: Marker.title(marker.latitude, marker.longitude),
                });
            }).click(function () {
                $('#map-canvas').gmap('openInfoWindow', {
                    'address': marker.address
                }, this);
            });
        });

JSON

{
    "markers": [{
        "latitude": -25.975769,
        "longitude": 32.582499,
        "title": "ACME Company",
        "address": "my address 1"
    }, {
        "latitude": -25.977743,
        "longitude": 32.579959,
        "title": "XPTO Company",
        "address": "my address 2"
    }]
}

Answer 1

为了减少混淆，我更改了参数标记的名称 tot marker_data（这并不是真正需要的）。 您的问题在于 position: 和 title: 的行。

...
//READ FROM JSON
$.getJSON('data_agents.json', function (data) {
    $.each(data.markers, function (i, marker_data) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(marker_data.latitude, marker_data.longitude),
            map: map,
            title: marker_data.title,
        });
    }).click(function () {
        $('#map-canvas').gmap('openInfoWindow', {
            'address': marker_data.address
        }, this);
    });
});
...

标记被放置在地图上，但我没有检查信息窗口

---

编辑：这是一个有效的例子

<style>
  #map-canvas {
    height: 500px;
  }
  .gm-style-iw{ /* infowindow */
    width: 200px;
  }
</style>
<div id="map-canvas"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
  $(document).ready(function () {
    var defaultLatLng = new google.maps.LatLng(-25.975769, 32.582499); // Default
    if (navigator.geolocation) {
        function success(pos) {
            // Location found, show map with these coordinates
            drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
        }
        function fail(error) {
            drawMap(defaultLatLng); // Failed to find location, show default map
        }
        // Find the users current position.  Cache the location for 5 minutes, timeout after 6 seconds
        navigator.geolocation.getCurrentPosition(success, fail, {
            maximumAge: 500000,
            enableHighAccuracy: true,
            timeout: 6000
        });
    } else {
        drawMap(defaultLatLng); // No geolocation support, show default map
    }
    function drawMap(latlng) {
        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
        // place the infowindow.  Invisible, without content.
        var infowindow = new google.maps.InfoWindow({
            content: '',
        });
        //READ FROM JSON
        $.getJSON('data/agents.json', function (data) {
            $.each(data.markers, function (i, marker_data) {
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(marker_data.latitude, marker_data.longitude),
                    map: map,
                    title: marker_data.title,
                });
                // when the client clicks on a marker we set the content and bind the position to the marker
                google.maps.event.addListener(marker, 'click', function() {
                  infowindow.setContent(marker_data.address);
                  infowindow.setPosition(this.getPosition())
                  infowindow.setMap(map);
                });
            });
        });
    }
  });
</script>