【问题标题】:JSON Data not appearing on marker in Google mapJSON数据没有出现在谷歌地图的标记上
【发布时间】:2016-10-23 22:59:48
【问题描述】:

我想加载我的 JSON 数据以显示在 Google 地图标记上。我使用 Jquery getJSON 方法从服务器调用 JSON 数据。但是地图出现了,但没有出现标记。这是代码

 var map;
    
    function initialize() {
   
        var mapProp = {
                center: new google.maps.LatLng(28.003389000000, -82.429500000000),
                zoom: 5,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

        map = new google.maps.Map(document.getElementById("map"), mapProp);
        $.getJSON('http://tripleclickstudio.com/json/file.json?callback=?', function (json1) {
   
            $.each(json1.ResponseData, function (key, data) {

                var latLng = new google.maps.LatLng(data.CoordinateY, data.CoordinateX),
                    marker = new google.maps.Marker({
                        position: latLng,
                        map: map,
                        title: data.BuildingName
                    }),
                    details = data.BuildingName + ", " + data.Location + ".";
                
            });

        });
    }
    var infowindow = new google.maps.InfoWindow();
    function bindInfoWindow(marker, map, infowindow, strDescription) {
       
        google.maps.event.addListener(marker, 'click', function () {
            infowindow.setContent(strDescription);
            infowindow.open(map, marker);
        });
        bindInfoWindow(marker, map, infowindow, details);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
    
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div id="map" style="border: 2px solid #3872ac;"></div>

这是我的 JSON 文件 JSON 文件的链接。所以,事情就是这样,我希望 JSON 数据坐标在谷歌地图中显示为标记。所以,无论如何,如果有人告诉我我犯了什么错误以及需要做些什么来解决这个问题。谢谢

【问题讨论】:

  • 浏览器开发者工具控制台是否有错误

标签: javascript jquery json google-maps google-maps-api-3


【解决方案1】:

只需从 json url 中删除 ?callback=?

该语法适用于 JSONP,您的文件内容为 JSON。

【讨论】:

    猜你喜欢
    • 2015-05-18
    • 1970-01-01
    • 2020-03-09
    • 1970-01-01
    • 2016-02-08
    • 2018-04-13
    • 2014-11-20
    • 2014-01-07
    • 1970-01-01
    相关资源
    最近更新 更多