首页 文章

如何使用google-map / Polymer加载GeoJSON文件？

提问于
浏览 次
-1

如何将GeoJSON文件加载到google-map组件中？

我想使用聚合物/谷歌 Map 库加载GeoJSON文件

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

我看过几十个地方

消息代码

<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>
javascript google-maps polymer

1 回答

  • 0

    您可以引入一个使用Google Maps Data layer的自定义模块 .

    例

    <head>
    <base href="https://raw-dot-custom-elements.appspot.com/GoogleWebComponents/google-map/1.2.0/">
    <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="polymer/polymer.html">
    <link rel="import" href="google-map/google-map.html">
    <link rel="import" href="google-map/google-map-marker.html">
</head>

<body>
    <style>
        google-map {
            height: 100vh;
        }
    </style>


    <google-map zoom="4" latitude="-28" longitude="137" api-key="">
        <google-map-data-layer url="https://storage.googleapis.com/mapsdevsite/json/google.json"></google-map-data-layer>
    </google-map>



    <dom-module id="google-map-data-layer">
        <template>

        </template>

        <script>
            HTMLImports.whenReady(function () {
                Polymer({
                    is: 'google-map-data-layer',
                  
                    _mapChanged: function () {
                        if (this.map && this.map instanceof google.maps.Map) {
                            //console.log(this.map.data);
                            this.map.data.loadGeoJson(this.url);
                        }
                    },

                    properties: {
                        map: {
                            type: Object,
                            observer: '_mapChanged'
                        },
                        url: {
                            type: String
                        }
                    }
                })
            });
        </script>
    </dom-module>

</body>
    回复于

相关问题