Google Maps API data.setStyle未在地图上显示图标

Question

我正在尝试使用Google Maps JS API创建一个小应用程序。 我正在使用数据层从GeoJSON文件加载一堆点。 该文件似乎正在正确加载，并且地图正在显示，但map.data.setstyle（）中设置的图标将不会显示...

下面是我的HTML，CSS和JS。 我已经看了2天了，我无法弄清楚出了什么问题。 先感谢您！

HTML

<body>
  <div id="map-canvas"></div>
</body>

CSS

html {
  height: 100%
}

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

#map-canvas {
  height: 100%
}

JS

$(document).ready(function() {
  var map;

  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(37.000, -120.000),
      zoom: 7
    };

    map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);

    map.data.loadGeoJson('/map.json');
    map.data.setStyle(function(feature) {
      var theaterName = feature.getProperty('name');
      return {
        icon: "https://maps.gstatic.com/mapfiles/ms2/micons/marina.png",
        visible: true,
        clickable: true,
        title: theaterName
      };
    });
  }
  google.maps.event.addDomListener(window, 'load', initialize);

});

JSON

{
  "type": "FeatureCollection",
  "features": [
  {
   "type": "Feature", 
   "properties": {
   "rentrak_id": "9183", "name": "Palm Theatre", "address": "817 Palm St, San Luis Obispo, CA"},
  "geometry": {
    "type": "Point",
    "coordinates": [35.2815558, -120.6638196]
  }
},
{
"type": "Feature", 
"properties": {
  "rentrak_id": "8961", "name": "King City 3", "address": "200 Broadway St, King City, CA"},
"geometry": {
  "type": "Point",
  "coordinates": [36.21372, -121.1261771]
}
},
{"type": "Feature", "properties": {
"rentrak_id": "5549", "name": "Van Buren 3 DI", "address": "3035 Van Buren Blvd, Riverside, CA"},
"geometry": {
"type": "Point",
"coordinates": [33.9113137, -117.4364228]
}},
{"type": "Feature", "properties": {
"rentrak_id": "990802", "name": "CGV Cinemas LA", "address": "621 S Western Ave, Los Angeles, CA"},
"geometry": {
"type": "Point",
"coordinates": [34.0626656, -118.3093961]
}},
{"type": "Feature", "properties": {
"rentrak_id": "5521", "name": "Rancho Niguel 7", "address": "25471 Rancho Niguel Rd, Laguna Niguel, CA"},
"geometry": {
"type": "Point",
"coordinates": [33.5560509, -117.68533]
}}]}

编辑：：

因此，当我使用此文件时，我的脚本正在运行： http ： //earthquake.usgs.gov/earthquakes/feed/geojsonp/2.5/week

这让我觉得我的本地json文件有问题...但是当我单步执行javascript时，我可以查看每个功能并检查属性和几何，它们似乎正确加载到google.maps中.feature对象。 所以，我仍然不知道为什么这些积分不会出现。

Answer 1

您使用布尔值作为字符串： 'true'而不是true 。 所以调用setStyle应该是：

map.data.setStyle(function(feature) {
  var theaterName = feature.getProperty('name');
  return {
    icon: "https://maps.gstatic.com/mapfiles/ms2/micons/marina.png",
    visible: true,
    clickable: true,
    title: theaterName
  };
});

更新：您的json文件已切换lat / lng坐标。 应该有

"coordinates": [-118.3093961, 34.0626656]

代替

"coordinates": [34.0626656, -118.3093961]

这就是我得到值为xy, -90对象的原因。

请参阅GeoJSON规范： 元素的顺序必须遵循x，y，z顺序（东向，北向，投影坐标参考系中坐标的高度，或地理坐标参考系中坐标的经度，纬度，高度）。

因此，Google Maps API使用lat / lng，对于GeoJSON文件坐标，它应该是lng / lat。

Answer 2

坐标需要在经度然后在geojson的纬度顺序... SO SILLY !!! 猜猜这是彻底阅读文档的一个很好的教训。

Answer 3

我相信你是在定义标记，但不是用它们设置地图。

尝试：theaterName.setMap（map）;

在地图上设置标记。

Google Maps API data.setStyle未在地图上显示图标

问题描述

3 个解决方案

解决方案1
7 2014-04-01 07:35:34

解决方案2
2 已采纳 2014-04-01 16:57:04

解决方案3
0 2014-04-01 01:13:13

Google Maps API data.setStyle未在地图上显示图标

问题描述

3 个解决方案

解决方案1 7 2014-04-01 07:35:34

解决方案2 2 已采纳 2014-04-01 16:57:04

解决方案3 0 2014-04-01 01:13:13

解决方案1
7 2014-04-01 07:35:34

解决方案2
2 已采纳 2014-04-01 16:57:04

解决方案3
0 2014-04-01 01:13:13