【发布时间】：2020-03-28 02:39:50
【问题描述】：
$(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" (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"
}
}
]
}
【问题讨论】：
-
您的 GeoJSON 是否在您服务器上的文件中？还是您在问如何从脚本中将其作为变量加载？
-
您是否更改了 URL 以指向您的文件？您的文件在网络服务器上吗？
-
抱歉，我上传了错误的文档（我编辑了问题）。正确的说我应该使用 map.data.loadGeoJson('google.json') 将数据加载到地图中，但是 cosole 给出了错误 'Cannot read property 'loadGeoJson' of undefined' 。我的 GeoJSON 不在服务器上，它在本地文件上。提前感谢您的帮助。
-
我得到的错误（在 Chrome 上）是：
Access to XMLHttpRequest at 'file:///<path to file>' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.。我在 Firefox 中遇到类似的错误。一旦我加载了 GeoJSON，很明显坐标是“向后”的（纬度和经度是颠倒的，在 GeoJSON 中，格式是[longitude, latitude]。我从来没有看到你报告的错误（Cannot read property 'loadGeoJson' of undefined） -
现在第一个错误没有显示，我得到另一个错误，我在问题上上传了它。它说我在“type”上有一个 SyntaxError：“FeatureCollection”（“：”部分）。另外，我问我的老师为什么标记不会显示，他说这与访问控制和坐标有关？我猜那是“在 'file:///
' 处访问 XMLHttpRequest ...”错误。你知道怎么解决吗？再次感谢您的所有帮助。
标签： javascript json google-maps google-maps-api-3 geojson