Fatal编程技术网
  • javascript/
  • 使用javascript api google map从json导入标记

使用javascript api google map从json导入标记

javascript json google-maps google-maps-api-3

使用javascript api google map从json导入标记,javascript,json,google-maps,google-maps-api-3,Javascript,Json,Google Maps,Google Maps Api 3,我有一个json文件： {"lat": "45.496275", "lon": "19.700225"} {"lat": "39.9332040422", "lon": "19.3821478025"} {"lat": "42.7236250523", "lon": "22.6935022429"} {"lat": "56.7236250523", "lon": "22.6935022429"} {"lat": "45.7236250523", "lon": "22.6935022429"} {

我有一个json文件：

{"lat": "45.496275", "lon": "19.700225"}
{"lat": "39.9332040422", "lon": "19.3821478025"}
{"lat": "42.7236250523", "lon": "22.6935022429"}
{"lat": "56.7236250523", "lon": "22.6935022429"}
{"lat": "45.7236250523", "lon": "22.6935022429"}
{"lat": "39.749522", "lon": "21.454769"}
和代码：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 80%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDK1PVNmr_Hmj3eFJPZU21J8h9EGBmCsqM&sensor=true">
    </script>
    <script type="text/javascript">
      var map;
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(44.7866, 20.4489),
          zoom: 7,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }
    </script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
    <script type="text/javascript">
      $(document).ready(function() {
        $.getJSON("/home/user/Desktop/markers.js", function(json1) {
          $.each(json1, function(key, data) {
            var mylatlng = new google.maps.LatLng(data.lat, data.lon);
            // Creating a marker and putting it on the map
            var marker = new google.maps.Marker({
                position: mylatlng,
            });
            marker.setMap(map);
          });
        });
      });
    </script>


<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDK1PVNmr_Hmj3eFJPZU21J8h9EGBmCsqM&callback=myMap"></script>

</body>
</html>


html{高度：100%}
正文{高度：80%；边距：0；填充：0}
#地图画布{高度：100%}
var映射；
函数初始化（）{
变量映射选项={
中心：新google.maps.LatLng（44.7866,20.4489），
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map_canvas”），
地图选项）；
}
$（文档）.ready（函数（）{
$.getJSON（“/home/user/Desktop/markers.js”，函数（json1）{
$.each（json1，函数（键，数据）{
var mylatng=new google.maps.LatLng（data.lat，data.lon）；
//创建标记并将其放在地图上
var marker=new google.maps.marker({
职位：mylatlng，
});
marker.setMap（map）；
});
});
});
我得到的只是一张没有标记的空地图。我不知道怎么了，也许json不是一个结构良好的工具？另外，我尝试了更多的代码版本，但都是一样的…

您可以尝试使用这个JSON文件：

[
 {"lat": "45.496275", "lon": "19.700225"},
 {"lat": "39.9332040422", "lon": "19.3821478025"},
 {"lat": "42.7236250523", "lon": "22.6935022429"},
 {"lat": "56.7236250523", "lon": "22.6935022429"},
 {"lat": "45.7236250523", "lon": "22.6935022429"},
 {"lat": "39.749522", "lon": "21.454769"}
]
您可以尝试使用此JSON文件：

[
 {"lat": "45.496275", "lon": "19.700225"},
 {"lat": "39.9332040422", "lon": "19.3821478025"},
 {"lat": "42.7236250523", "lon": "22.6935022429"},
 {"lat": "56.7236250523", "lon": "22.6935022429"},
 {"lat": "45.7236250523", "lon": "22.6935022429"},
 {"lat": "39.749522", "lon": "21.454769"}
]
Milan Rakos关于JSON格式的回答是正确的，如本文所示

我还删除了加载GoogleAPI和

callback=myMap
这导致api出现错误


html{
身高：100%
}
身体{
身高：80%；
保证金：0；
填充：0
}
#地图画布{
身高：100%
}
var映射；
函数初始化（）{
变量映射选项={
中心：新google.maps.LatLng（44.7866,20.4489），
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map_canvas”），
地图选项）；
var json1=[{
“lat”：“45.496275”，
“lon”：“19.700225”
},
{
“lat”：“39.9332040422”，
“lon”：“19.3821478025”
},
{
“lat”：“42.7236250523”，
“lon”：“22.6935022429”
},
{
“lat”：“56.7236250523”，
“lon”：“22.6935022429”
},
{
“lat”：“45.7236250523”，
“lon”：“22.6935022429”
},
{
“lat”：“39.749522”，
“lon”：“21.454769”
}
];
$.each（json1，函数（键，数据）{
var mylatng=new google.maps.LatLng（data.lat，data.lon）；
//创建标记并将其放在地图上
var marker=new google.maps.marker({
职位：mylatlng，
});
marker.setMap（map）；
});
}
Milan Rakos关于JSON格式的回答是正确的，如本文所示

我还删除了加载GoogleAPI和

callback=myMap
这导致api出现错误


html{
身高：100%
}
身体{
身高：80%；
保证金：0；
填充：0
}
#地图画布{
身高：100%
}
var映射；
函数初始化（）{
变量映射选项={
中心：新google.maps.LatLng（44.7866,20.4489），
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map_canvas”），
地图选项）；
var json1=[{
“lat”：“45.496275”，
“lon”：“19.700225”
},
{
“lat”：“39.9332040422”，
“lon”：“19.3821478025”
},
{
“lat”：“42.7236250523”，
“lon”：“22.6935022429”
},
{
“lat”：“56.7236250523”，
“lon”：“22.6935022429”
},
{
“lat”：“45.7236250523”，
“lon”：“22.6935022429”
},
{
“lat”：“39.749522”，
“lon”：“21.454769”
}
];
$.each（json1，函数（键，数据）{
var mylatng=new google.maps.LatLng（data.lat，data.lon）；
//创建标记并将其放在地图上
var marker=new google.maps.marker({
职位：mylatlng，
});
marker.setMap（map）；
});
}
请用以下代码替换您的html代码。我调整了你的代码

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 80%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>

    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDK1PVNmr_Hmj3eFJPZU21J8h9EGBmCsqM&sensor=true">
    </script> 

    <script type="text/javascript">
      var map;
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(44.7866, 20.4489),
          zoom: 7,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);

        $.ajax({
                url:'/home/user/Desktop/markers.js',
                dataType: "json", 
                success: function(data){
                    $.each(data, function(key, data) {
                        var mylatlng = new google.maps.LatLng(data.lat, data.lon);
                        // Creating a marker and putting it on the map
                        var marker = new google.maps.Marker({
                          position: mylatlng,
                        });
                        marker.setMap(map);
                    });
                }
            });

      }
    </script>
   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 

  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div> 

</body>
</html>
请用下面的代码替换您的html代码。我调整了你的代码

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 80%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>

    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDK1PVNmr_Hmj3eFJPZU21J8h9EGBmCsqM&sensor=true">
    </script> 

    <script type="text/javascript">
      var map;
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(44.7866, 20.4489),
          zoom: 7,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);

        $.ajax({
                url:'/home/user/Desktop/markers.js',
                dataType: "json", 
                success: function(data){
                    $.each(data, function(key, data) {
                        var mylatlng = new google.maps.LatLng(data.lat, data.lon);
                        // Creating a marker and putting it on the map
                        var marker = new google.maps.Marker({
                          position: mylatlng,
                        });
                        marker.setMap(map);
                    });
                }
            });

      }
    </script>
   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 

  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div> 

</body>
</html>
不幸的是，它没有帮助。不幸的是，它没有帮助。但问题是，当我尝试导入json文件（它有2000多个坐标）时，我不知道是什么问题，在这种情况下，为什么不能从json收集数据，即使我在文件中复制Milan的json示例。如果使用Chrome，请按F12打开开发者控制台，重新加载页面，并检查是否存在如下错误。。。“无法加载XMLHttpRequestfile:///C://home/user/Desktop/markers.js. 跨源请求仅支持协议方案：http、数据、chrome、chrome扩展、https”。查看此页面了解更多信息：但问题是，当我尝试导入json文件（它有2000多个坐标）时，我不知道是什么问题，在这种情况下，为什么不能从json收集数据，即使我在文件中复制Milan的json示例。如果使用Chrome，请按F12打开开发者控制台，重新加载页面，然后检查是否有这样的错误。。。“无法加载XMLHttpRequestfile:///C://home/user/Desktop/markers.js. 跨源请求仅支持协议方案：http、数据、chrome、chrome扩展、https”。有关更多信息，请参见本页：还是一样的，空地图：/请检查控制台并告诉我错误。将marker.js文件从桌面移动到项目文件夹，并将此url:“/home/user/desktop/markers.js”更改为此url:“”-请在前缀中使用http并测试sit