文章/答案/技术大牛

发布

社区首页 >问答首页 >如何从google map api的json文件中读取json数据？

问如何从google map api的json文件中读取json数据？
EN

Stack Overflow用户

提问于 2013-04-19 18:23:11

回答 1查看 2.5K关注 0票数 2

我正在尝试做一个带有标记的谷歌地图api，它将显示一些地方的纬度和经度。我正在尝试用json文件来做这件事，但它不起作用。这是我的代码..

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Cluster Map</title>

    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="text/javascript"></script>

    <script type="text/javascript">
        var map;
        var markers = [];

        function initialize() {
            geocoder = new google.maps.Geocoder();
            var center = new google.maps.LatLng(43.474144,-112.03866);
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 7,
                center: center,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            markMultiple();
        }

        function markMap(latLng, content){
            var marker = new google.maps.Marker({
                position: latLng
            });
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(content);
                infowindow.open(map, marker);
            });

            markers.push(marker);
        }
        function markMultiple(){
            $.parseJSON('test.json', function(data) {
                $.each(data.markers, function(i, obj) {
                    var latLng =  new google.maps.LatLng(obj.lat,obj.lng);
                    var content = obj.id + ':' + obj.lat + ',' + obj.lng;

                    markMap(latLng, content);
                });
            });


             var markerCluster = new MarkerClusterer(map, markers);
        }



        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div id="map-container">
        <div id="map"></div>
    </div>
</body>

请帮帮我..

google-maps-api-3

javascript

jquery

json

回答 1

Stack Overflow用户

发布于 2013-09-04 01:47:04

Engineer是对的，你需要使用$.getJSON方法，$.parseJSON接受JSON字符串，它不加载外部文件。

getJSON：http://api.jquery.com/jQuery.getJSON/ parseJSON：http://api.jquery.com/jQuery.parseJSON/

我将您的代码放在一个jsFiddle中，它可以使用getJSON和另一个测试JSON文件(您没有提供您正在使用的原始test.json )。

$.getJSON('test.json', function(data) {
                $.each(data.markers, function(i, obj) {
                    var latLng =  new google.maps.LatLng(obj.lat,obj.lng);
                    var content = obj.id + ':' + obj.lat + ',' + obj.lng;

                    markMap(latLng, content);
                });
            });

http://jsfiddle.net/WYfjv/

如果您的代码不能正常工作，则可能是您的JSON格式不正确(尝试使用JSONLINT对其进行测试)。此外，如果您已经在改进，我建议使用普通的for循环，而不是$.each :)

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/16102450

复制

相似问题

问如何从google map api的json文件中读取json数据？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从google map api的json文件中读取json数据？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从google map api的json文件中读取json数据？
EN