在谷歌地图 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>

I've been reading the documentation for the google maps js API and I can't figure this out.我一直在阅读 google maps js API 的文档，但我无法弄清楚。 I want to load a geojson file to the map so it can show all the markers, but in the documentation (shown below) it uses a url.我想将一个 geojson 文件加载到地图上，以便它可以显示所有标记，但在文档（如下所示）中它使用了一个 url。 How can I do the same but with a local file (using my own geojson)?除了本地文件（使用我自己的geojson），我如何做同样的事情？

This is the google api documentation这是 google api 文档

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.这是我的 geojson。 According to the console, the error is in "type": "FeatureCollection" (the ":")根据控制台，错误在“type”：“FeatureCollection” （“：”）

 {
  "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控制台错误 geoJSON

View on http://geojson.io/在 http://geojson.io/ 查看

View on my local server在我的本地服务器上查看

Answer 1

There's no problem with your json file nor with the way you load it.您的 json 文件和加载方式都没有问题。 Try running this codesandbox for demonstration in vanilla JS.尝试在 vanilla JS 中运行此代码和框进行演示。

As for your own jquery code, it works fine if you format it properly and use the right files, placed correctly at root-level.至于您自己的 jquery 代码，如果您正确格式化它并使用正确的文件，正确放置在根级别，它就可以正常工作。 Please try the code below for each file.请为每个文件尝试下面的代码。 Hope this helps!希望这可以帮助！

index.html索引.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脚本.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"
             }
         }
     ]
 }

在谷歌地图 api 上加载 geojson

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-12-06 11:24:09

在谷歌地图 api 上加载 geojson

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-12-06 11:24:09

解决方案1
1 已采纳 2019-12-06 11:24:09