问题：

在谷歌地图api上加载geojson

常哲彦

2023-03-14

 $(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>

我一直在阅读GoogleMapsJSAPI的文档，我无法理解这一点。我想将geojson文件加载到地图，以便它可以显示所有标记，但在文档（如下所示）中，它使用url。除了使用本地文件（使用我自己的geojson）之外，我如何做同样的事情？

这是GoogleAPI文档

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。根据控制台，错误出现在“类型”：“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"
      }
    }
  ]
}

控制台错误

控制台错误geJSON

看法http://geojson.io/

查看我的本地服务器

共有1个答案

施德运

2023-03-14

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

至于您自己的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');
}

样式表

#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中加载多边形

我想实现喜欢用户可以从我们的应用程序在谷歌地图绘制一个区域。然后当他回来的时候，然后应该加载他/她以前画的数据。我用了两种方法。一是,， > 使用javascript在googlemap中绘制多边形 https://developers.google.com/maps/documentation/javascript/drawinglayer 使用谷歌地图api数据层<代码>http://jsf
Javascript谷歌地图API

最近Chrome开始发出以下警告： [违规]将非被动事件侦听器添加到阻止滚动的触摸移动事件。考虑将事件处理程序标记为“被动”，以使页面更具响应性。看https://www.chromestatus.com/feature/5745543795965952 这些都来自JavaScript谷歌地图API代码。我可以在自己的代码中将{passive:true}添加到addEventListener（），
谷歌地图API v3 getPanoramaByLocation（StreetView）

我正在做一个项目，选择世界各地的随机地点，需要从谷歌街景的一些功能。我正在使用谷歌地图的API v3。我的问题是getPanoramaByLocation方法。根据谷歌文档，getPanoramaByLocation是：谢谢大家，希望这对未来的任何人都有帮助。
谷歌地点API vs.谷歌地理代码API

我已经用自动完成和谷歌地理编码应用编程接口实现了谷歌地方应用编程接口。问题是结果似乎不正确。有时自动完成列表中的一些选择结果根本没有地理编码，我得到的只是状态ZERO_RESULTS。我知道Google Autocomplete也使用Places，而Google Geocode只使用邮政编码，这可能会有一些问题，但我如何限制Autocomplete只提供邮政编码结果呢。
Android：谷歌地图api版本2

我遵循配置谷歌地图Android API v2官方步骤，我使用的是Android 3.1版本。我运行项目时出错清单文件一个ctivity_main.xml LogCat 我还想知道Google map API v2的最低要求
谷歌地图API V3方法fitBounds（）

我有这段代码来渲染地图。即使两个点距离为25 km，我也会得到以下结果：而我想渲染更高级别的缩放。这样地我使用fitBounds（）方法谢谢你的支持

在谷歌地图api上加载geojson

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档