Javascript 从JSON填充Google地图标记

我是一名jQuery手机初学者，我正在尝试从JSON文件读取数据，并将信息（如坐标）填充到googlemaps标记中

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

---

为了减少混淆，我将参数marker的名称改为marker_数据（实际上并不需要）。 您的问题出现在位置和标题为的行上

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

#地图画布{
高度：500px；
}
.gm样式的iw{/*信息窗口*/
宽度：200px；
}
$（文档）.ready（函数（）{
var defaultLatLng=new google.maps.LatLng（-25.975769,32.582499）；//默认值
if（导航器.地理位置）{
功能成功（pos）{
//找到位置，用这些坐标显示地图
drawMap（新的google.maps.LatLng（pos.coords.lation，pos.coords.longitude））；
}
功能失败（错误）{
drawMap（defaultLatLng）；//找不到位置，显示默认地图
}
//查找用户当前位置。缓存该位置5分钟，6秒后超时
navigator.geolocation.getCurrentPosition（成功、失败、{
最高限额：50万，
EnableHighAccurance:正确，
超时：6000
});
}否则{
drawMap（defaultLatLng）；//不支持地理位置，显示默认地图
}
功能绘图图（latlng）{
变量myOptions={
缩放：10，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“地图画布”），myOptions）；
//放置信息窗口。不可见，没有内容。
var infowindow=new google.maps.infowindow({
内容：“”，
});
//从JSON读取
$.getJSON（'data/agents.json'，函数（data）{
$.each（data.markers，function（i，marker\u数据）{
var marker=new google.maps.marker({
位置：new google.maps.LatLng（marker_data.latitude，marker_data.longitude），
地图：地图，
标题：marker_data.title，
});
//当客户端单击标记时，我们设置内容并将位置绑定到标记
google.maps.event.addListener（标记'click'，函数（）{
infowindow.setContent（marker_data.address）；
infowindow.setPosition（this.getPosition（））
infowindow.setMap（map）；
});
});
});
}
});

发布的代码不是有效的javascript（未关闭

drawMap

函数，也未关闭初始的

$（文档）。在（“pageinit”

）上。什么是

Marker.title（）

/

Marker.LatLng（）

？我可能复制错了。Google地图确实出现了，但没有标记。我相信Latlng是API的一个内部函数。将

Marker.Latlng（Marker.latitude，Marker.longitude），

替换为

新的Google.maps.Latlng（Marker.latitude，Marker.longitude）

。

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