发表新帖
发表新帖

Google Maps - Multiple marker from extern json

前端 未结
关注
3 692
挽巷
挽巷 2020-12-03 00:13

I have to add multiple marker to a google map, but the data is in an extern json file.

At the moment Im running it like this

var json = [
  {
    \"t
相关标签:
3条回答
  • 走了就别回头了
    2020-12-03 00:57

    There are two problems in your code. Your json file misses the [ at the beginning and ] at the end. Your javascript is wrong too, you want to do something with the json in the callback of getJSON. The code for your problem is:

    $.getJSON("foo.txt", function(json1) {
    $.each(json1, function(key, data) {
        var latLng = new google.maps.LatLng(data.lat, data.lng); 
        // Creating a marker and putting it on the map
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            title: data.title
        });
    });
});

    EDIT:

    Here is a working example based on the google maps tutorial. You need the correct file foo.txt: 

    <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true">
    </script>
    <script type="text/javascript">
      var map;
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(58, 16),
          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("foo.txt", function(json1) {
          $.each(json1, function(key, data) {
            var latLng = new google.maps.LatLng(data.lat, data.lng); 
            // Creating a marker and putting it on the map
            var marker = new google.maps.Marker({
                position: latLng,
                title: data.title
            });
            marker.setMap(map);
          });
        });
      });
    </script>
  </body>
</html>
    0 讨论(0)
  • 灰色年华
    2020-12-03 00:59

    The example halex provided didn't work for me. I sorted it out by adding square brackets into foo.txt to declare it as an array and running a web server to access the html file, rather than just opening it in a browser.

    I also needed to add a delay:

    setTimeout(function (){marker.setMap(map);}, 1000);

    Now it works beautifully!

    0 讨论(0)
  • 春和景丽
    2020-12-03 01:01

    In the Google maps documentation you can find an example : https://developers.google.com/maps/documentation/javascript/importing_data

    JQuery not needed

    <div id="map"></div>
<script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: new google.maps.LatLng(2.8,-187.3),
      mapTypeId: 'terrain'
    });

    // Create a <script> tag and set the USGS URL as the source.
    var script = document.createElement('script');
    // This example uses a local copy of the GeoJSON stored at
    // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
    script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  // Loop through the results array and place a marker for each
  // set of coordinates.
  window.eqfeed_callback = function(results) {
    for (var i = 0; i < results.features.length; i++) {
      var coords = results.features[i].geometry.coordinates;
      var latLng = new google.maps.LatLng(coords[1],coords[0]);
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });
    }
  }
</script>
    0 讨论(0)
 看不清?
提交回复
热议问题