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聚合物元素不起作用

1 个答案: