在 google 地图 api 上加载 geojson

Question

 $(document).ready(function(){
  $("button").click(function(){
    $("#apartado-api").toggle();
  });
});

           function initMap() {
             var map = new google.maps.Map(document.getElementById('map'), {
             center: {lat:  40.416775, lng:-3.703790},
             zoom: 14
           });
 
 
 
 map.data.loadGeoJson('map.json');
 
 
 ////////////////////////////////////////////this would be on a separate json file called map.json. I want to bring this file to the js one and add the marker to the map
 {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [ -3.717451,  40.469264 ]
      },
      "properties": {
       "name": "Peluquería Canina Pet Shop",
         "address": "Calle Valdesangil, 9, 28039 Madrid"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [ -3.649130, 40.476251 ]
      },
      "properties": {
        "name": "Zoolife Veterinaria",
        "address": "Av. de Menéndez Pelayo, 9, 28009 Madrid"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-3.668233, 40.478529 ]
      },
      "properties": {
        "name": "La Caseta",
           "address": "Calle de Arturo Soria, 320, 28033 Madrid"
      }
    }
  ]
}

 /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
       #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #boton-mapa-api{
        z-index: 1000;
        position: absolute;
        top: 60px;
        left: 15px;
        width: 400px;
        margin: 0;
        cursor: pointer;
      }

      #apartado-api{
        width: 400px;
        height: 400px;
        z-index: 900;
        position: absolute;
        top: 70px;
        left: 15px;
        background: rgb(255, 255, 255);
        border-radius: 20px;
        -webkit-box-shadow: 2px 9px 11px 0px rgba(0,0,0,0.07);
        -moz-box-shadow: 2px 9px 11px 0px rgba(0,0,0,0.07);
        box-shadow: 2px 9px 11px 0px rgba(0,0,0,0.07);
      }

      /*comienzo botón estandar*/
.boton-general {
    font-family: 'ABeeZee', sans-serif;
    font-size: 1em;
    color: white;
    letter-spacing: 1px;
    padding: 15px;
    margin: 20px;
    font-weight: 900;
    border: none;
    border-radius: 50px;
    /*gradiente*/
    background: rgb(123, 228, 149);
    background: linear-gradient(175deg, rgba(123, 228, 149, 1) 32%, rgba(64, 185, 184, 1) 100%);
    transition: all 0.3s ease-in-out;
    /*sombras*/
    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 7px 6px 14px 0px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 7px 6px 14px 0px rgba(0, 0, 0, 0.12);

}

/*estados del botón*/
.boton-general:hover {
    letter-spacing: 2.5px;
    border-radius: 10px;
}



.boton-general:focus {
    outline: 0;

}

<!DOCTYPE html>
<html>
  <head>
    <title>Animal Rooms</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <button id="boton-mapa-api" class="boton-general">¿Qué buscas?</button>

    <div id="apartado-api"></div>
    <!-- div del mapa -->
    <div id="map"></div>
    <!-- div del mapa -->

    <!-- link API -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">
    </script>
    <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>
     <!-- js de la API -->
    <script src="script.js"></script>
  </body>
</html>

我一直在阅读 google 地图 js API 的文档，但我无法弄清楚这一点。我想将一个 geojson 文件加载到地图上，以便它可以显示所有标记，但在文档（如下所示）中它使用了 url。我如何使用本地文件（使用我自己的 geojson）做同样的事情？

This is the google api documentation

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'
    });


    map.data.loadGeoJson('google.json');

This is my geojson. According to the console, the error is in "type": "FeatureCollection" (the ":")

 {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [ -3.717451,  40.469264 ]
      },
      "properties": {
       "name": "Peluquería Canina Pet Shop",
         "address": "Calle Valdesangil, 9, 28039 Madrid"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [ -3.649130, 40.476251 ]
      },
      "properties": {
        "name": "Zoolife Veterinaria",
        "address": "Av. de Menéndez Pelayo, 9, 28009 Madrid"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-3.668233, 40.478529 ]
      },
      "properties": {
        "name": "La Caseta",
           "address": "Calle de Arturo Soria, 320, 28033 Madrid"
      }
    }
  ]
}

Console error

Console error geoJSON

View on http://geojson.io/

View on my local server

Answer 1

您的 json 文件和加载它的方式都没有问题。试试运行这个 codesandbox 在 vanilla JS 中的演示。

至于您自己的 jquery 代码，如果您正确格式化它并使用正确的文件并正确放置在根级别，它就可以正常工作。请为每个文件尝试以下代码。希望这对您有所帮助！

index.html

<!DOCTYPE html>
<html>

<head>
    <title>Animal Rooms</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <button id="boton-mapa-api" class="boton-general">¿Qué buscas?</button>

    <div id="apartado-api"></div>
    <!-- div del mapa -->
    <div id="map"></div>
    <!-- div del mapa -->

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
    </script>

    <!-- js de la API -->
    <script src="script.js"></script>
</body>

</html>

script.js

$(document).ready(function() {
    $("button").click(function() {
        $("#apartado-api").toggle();
    });
});

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 40.416775, lng: -3.703790 },
        zoom: 12
    });
    map.data.loadGeoJson('map.json');
}

style.css

#map {
    height: 100%;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#boton-mapa-api {
    z-index: 1000;
    position: absolute;
    top: 60px;
    left: 15px;
    width: 400px;
    margin: 0;
    cursor: pointer;
}

#apartado-api {
    width: 400px;
    height: 400px;
    z-index: 900;
    position: absolute;
    top: 70px;
    left: 15px;
    background: rgb(255, 255, 255);
    border-radius: 20px;
    -webkit-box-shadow: 2px 9px 11px 0px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 2px 9px 11px 0px rgba(0, 0, 0, 0.07);
    box-shadow: 2px 9px 11px 0px rgba(0, 0, 0, 0.07);
}

/*comienzo botón estandar*/

.boton-general {
    font-family: 'ABeeZee', sans-serif;
    font-size: 1em;
    color: white;
    letter-spacing: 1px;
    padding: 15px;
    margin: 20px;
    font-weight: 900;
    border: none;
    border-radius: 50px;
    /*gradiente*/
    background: rgb(123, 228, 149);
    background: linear-gradient(175deg, rgba(123, 228, 149, 1) 32%, rgba(64, 185, 184, 1) 100%);
    transition: all 0.3s ease-in-out;
    /*sombras*/
    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 7px 6px 14px 0px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 7px 6px 14px 0px rgba(0, 0, 0, 0.12);
}

/*estados del botón*/

.boton-general:hover {
    letter-spacing: 2.5px;
    border-radius: 10px;
}

.boton-general:focus {
    outline: 0;
}

map.json

 {
     "type": "FeatureCollection",
     "features": [{
             "type": "Feature",
             "geometry": {
                 "type": "Point",
                 "coordinates": [-3.717451, 40.469264]
             },
             "properties": {
                 "name": "Peluquería Canina Pet Shop",
                 "address": "Calle Valdesangil, 9, 28039 Madrid"
             }
         },
         {
             "type": "Feature",
             "geometry": {
                 "type": "Point",
                 "coordinates": [-3.649130, 40.476251]
             },
             "properties": {
                 "name": "Zoolife Veterinaria",
                 "address": "Av. de Menéndez Pelayo, 9, 28009 Madrid"
             }
         },
         {
             "type": "Feature",
             "geometry": {
                 "type": "Point",
                 "coordinates": [-3.668233, 40.478529]
             },
             "properties": {
                 "name": "La Caseta",
                 "address": "Calle de Arturo Soria, 320, 28033 Madrid"
             }
         }
     ]
 }

在 google 地图 api 上加载 geojson

Load geojson on google maps api

javascript

json

google-maps

geojson

google-maps-api-3