Javascript 如何使用google map/Polymer加载GeoJSON文件？ 如何将GeoJSON文件加载到GoogleMap组件中？

我想使用polymer/google地图库加载GeoJSON文件

你能告诉我怎样才能做到这一点吗

我找了很多地方

源代码

var gMap=document.querySelector（'google-map'）；
//gMap.data.loadGeoJson（'https://storage.googleapis.com/mapsdevsite/json/google.json');
#投入{
位置：绝对位置；
底部：25px；
左：25px；
z指数：100；
}
核心场{
背景：#fff；
边界半径：3px；
边缘顶部：5px；
宽度：200px；
}
核心字段核心图标{
垂直对齐：中间对齐；
}
谷歌地图{
显示：块；
高度：600px；
}
聚合物({
是：“最佳航空视图”，
就绪：函数（）{
var self=这个；
this.apiKey=“API_KEY”；
}
});

您可以引入一个自定义模块，利用该模块实现这一点

范例

谷歌地图{
高度：100vh；
}
HTMLImports.whenReady（函数（）{
聚合物({
是：'谷歌地图数据层'，
_mapChanged:函数（）{
if（this.map&&this.map instanceof google.maps.map）{
//console.log（this.map.data）；
this.map.data.loadGeoJson（this.url）；
}
},
特性：{
地图：{
类型：对象，
观察员：“(地图已更改)”
},
网址：{
类型：字符串
}
}
})
});

<script src="../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">

<!-- Imports for this component -->
<link rel="import" href="../../bower_components/px-view-header/px-view-header.html">

<!-- Imports for this component -->
<link rel="import" href="../../bower_components/px-card/px-card.html">


<!-- Imports for this component -->
<link rel="import" href="../../bower_components/google-map/google-map.html">

<link rel="import" href="../../bower_components/google-map/google-map-marker.html">
<link rel="import" href="../../bower_components/google-map/google-map-poly.html">
<link rel="import" href="../../bower_components/google-map/google-map-directions.html">



<dom-module id="optimAviation-view">

  <template>


    <script>
      var gMap = document.querySelector('google-map');
      // gMap.data.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/google.json');
    </script>
    <!-- https://io2014codelabs.appspot.com/static/codelabs/polymer-build-maps/#2 -->
    <style>
      #inputs {
        position: absolute;
        bottom: 25px;
        left: 25px;
        z-index: 100;
      }

      core-field {
        background: #fff;
        border-radius: 3px;
        margin-top: 5px;
        width: 200px;
      }

      core-field core-icon {
        vertical-align: middle;
      }

      google-map {
        display: block;
        height: 600px;
      }
    </style>

    <google-map latitude="37.779" longitude="-122.3892" min-zoom="3" max-zoom="11" language="en" api-key="API_KEY">
      <google-map-marker latitude="37.779" longitude="-122.3892" label="GG" title="Go Giants!" draggable="true" drag-events>

      </google-map-marker>
      <google-map-poly closed fill-color="red" fill-opacity=".25" stroke-weight="1">
        <google-map-point latitude="37.779" longitude="-122.3892"></google-map-point>
        <google-map-point latitude="37.804" longitude="-122.2711"></google-map-point>
        <google-map-point latitude="37.386" longitude="-122.0837"></google-map-point>
      </google-map-poly>
    </google-map>
    <google-map-directions map="{{map}}" start-address="{{start}}" end-address="{{end}}" language="en" api-key="API_KEY"></google-map-directions>
  </template>
  </template>
</dom-module>
<script>
  Polymer({
    is: "optimAviation-view",
    ready: function () {
      var self = this;
      this.apiKey = "API_KEY";
    }
  });
</script>