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 specs：元素的顺序必须遵循x，y，z顺序（东向，北向，投影坐标参考系中坐标的高度，或经度，纬度，坐标的高度）地理坐标参考系统）。

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

Answer 2

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

Answer 3

我相信您正在定义标记，但却没有使用它们设置地图。

尝试： theaterName.setMap（地图）;

在地图上设置标记。

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

3 个答案: