堆栈内存溢出
  繁体   English   中英

使用JavaScript API Google Map从JSON导入标记

[英]Import markers from json with javascript api google map

 原文  2017-07-12 09:10:56  3   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"}
{"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>

我所得到的只是一张没有标记的空地图。 我不知道怎么了，也许json的结构不正确？ 另外，我尝试了更多的代码版本，但是是相同的...

3 个解决方案

解决方案1
 2 已采纳  2017-07-12 10:25:33

请用以下代码替换您的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>

请确保marker.js在正确的路径中，然后将您的marker.js 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"}]

解决方案2
 1  2017-07-12 09:19:29

您可以尝试使用以下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"}
]

解决方案3
 1  2017-07-12 09:55:35

正如本片段所示，Milan Rakos关于JSON格式的答案是正确的。

我还删除了双重调用以加载Google api和 

callback=myMap

导致api出现错误。 

 <!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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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); 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, 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> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDK1PVNmr_Hmj3eFJPZU21J8h9EGBmCsqM"></script> </html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Google Map api标记Javascript 使用Javascript从外部json向Google Map添加多个标记 使用Javascript在Google Maps API中使用JSON标记 从JSON PHP将标记加载到Google Map 通过HTTPrequest Javascript将Google Map与标记集成 从Google Map帮助中删除标记-JavaScript 在javascript中从json设置许多谷歌标记 谷歌地图 JS API V3，使用远程 json 源的信息窗口将多个标记添加到 map 在Google Maps JavaScript API 3.7上隐藏标记时出错 Google Map API 3 / javascript：标记突然变得不可见
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM