javascript - 从 JSON 填充 Google map 标记

Question

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

此代码工作正常，但没有填充任何标记。任何人都可以帮助我发现 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

为了减少困惑，我将参数标记的名称更改为marker_data(这并不是真正需要的)。您的问题出在位置:和标题:的行上。

...
//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);
    });
});
...

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

<小时/>

编辑:这是一个功能示例

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