google-map-directions 聚合物元素不工作

Question

我创建了自己的元素，该元素使用 google-map 和 google-map-directions，如示例 here 中所示。

这是我的元素：

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/google-map/google-map.html">
<dom-module id="my-map">
<template>
    <style>
        #map-container {
            height: 500px;
            width: 500px;
        }
    </style>
    <div id="map-container">
        <google-map-directions map="{{map}}"
             start-address="San Francisco"
             end-address="Mountain View"
             travel-mode="BICYCLING"
             api-key="<my-key>"></google-map-directions>
        <google-map map="{{map}}" latitude="37.779"
             longitude="-122.3892" api-key="AIzaSyDoVR8wgBH0vUoMfhdHQ38e-hBIWk3wRbs"></google-map>
    </div>
</template>
<script>
    Polymer({
        is: "my-map",

        properties: {
            fromCity: {
                type: String,
                value: "Green Bay, WI"
            },
            toCity: {
                type: String,
                value: "Chicago, IL"
            }
        },

        listeners: {
            "dom-change": function(e) {
                console.log("Dom has changed.");
            }
        }
    });
</script>
</dom-module>

我从我的测试页面调用这个元素，像这样：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>my-card</title>

    <script src="../bower_components/webcomponentsjs/webcomponents-lite.js">    </script>
    <link rel="import" href="../bower_components/polymer/polymer.html">
    <link rel="import" href="../bower_components/iron-component-page/iron-component-page.html">
    <link rel="import" href="../bower_components/google-map/google-map.html">
    <link rel="import" href="../../sni-card.html">
    <link rel="import" href="../../sni-map.html">
  </head>
  <body>
    <style>
        #map-container {
            height: 500px;
            width: 500px;
        }
</style>
<!--iron-component-page src="sni-card.html"></iron-component-page-->
<script>
  function onFromCityChanged(changedObject) {
    var myMap = document.querySelector('#my-sni-map');
    myMap.fromCity = changedObject.detail.value;
  }

  function onToCityChanged(changedObject) {
    var myMap = document.querySelector('#my-sni-map');
    myMap.toCity = changedObject.detail.value;
  }
</script>
<my-map id="my-sni-map" from-city="[[from_city]]" to-city="[[to_city]]"></my-map>

问题

没有显示方向。我只有一张旧金山的地图。

问题

如何显示路线？

Answer 1

为了使用 google-map-directions 元素，您需要导入 google-map-directions.html:

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

导入 google-map-directions.html 后，路由将显示如下 demo

google-map-directions 聚合物元素不工作

google-map-directions polymer element not working

google-maps

google-directions-api