堆栈内存溢出
  繁体   English   中英

在谷歌地图 api 上加载 geojson

[英]Load geojson on google maps api

 原文  2019-12-03 11:59:27  4   1    javascript/ json/ google-maps/ google-maps-api-3/ geojson

问题描述

 $(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 maps js API 的文档，但我无法弄清楚。 我想将一个 geojson 文件加载到地图上，以便它可以显示所有标记，但在文档（如下所示）中它使用了一个 url。 除了本地文件（使用我自己的geojson），我如何做同样的事情？

这是 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');

这是我的 geojson。 根据控制台，错误在“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"
      }
    }
  ]
}

控制台错误

控制台错误 geoJSON

在 http://geojson.io/ 查看

在我的本地服务器上查看

1 个解决方案

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

您的 json 文件和加载方式都没有问题。 尝试在 vanilla JS 中运行此代码和框进行演示。

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

索引.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>

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

样式文件

#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;
}

地图文件

 {
     "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"
             }
         }
     ]
 }

暂无
暂无

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

相关问题 Google地图上是否存在GeoJSON加载事件？ 谷歌地图api geoJSON - 没有出现描述框 在Google Maps API和GeoJSON上圈出“降雨”动画？ 谷歌地图Geojson infowindow 带有GeoJson的Google Maps GeoComplete 无法使用Google Maps Data Layer从源加载geojson 将 GeoJSON 数据添加到本地托管的 Google Maps API 如何在 Google Maps API 中获取我的地理围栏的 GeoJSON？ 在google maps api v3中独立地与geojson图层交互 Google Maps API v3：containsLocation（）与geojson数据
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM