如何在 polymer#^2.0 中包含 google-map，因为它在 polymer 1.7 中工作

Question

我已经包含了 api，在升级到 polymer ^2.0 之后，一切都在 polymer 1.7 中完美运行之前 google 地图不呈现。这是我在主应用程序页面中编写的代码 polymer class base:

<iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">  
  <jj-maps name="maps"  user="{{user}}" sprof="{{sprof}}"></jj-maps>
  <jj-list name="list" >    Jobs   </jj-list>  
  <jj-infos name="infos">    infos      </jj-infos>
  <jj-contacts name="contacts" >  Contacts  </jj-contacts>
  <jj-messages name="messages">  Messages  </jj-messages>
  <jj-404 name="404" > 404          </jj-404>
</iron-pages>

在 jj-maps.html 代码示例是：

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

模板标签中的样式代码：

<dom-module id="jj-maps">
  <template>
    <style  include="iron-flex iron-flex-alignment">
      :host {
       .....
       google-map, #mapResults {
           margin-top: 10px;
           position: relative;
           height: 100vh;
           width: 100vh%; 
           z-index: 1;
       }

.....

       <div id="mapResults"> 
         <google-map 
                  id="map" 
                  map="{{map}}" 
                  latitude="[[latitude]]" 
                  longitude="[[longitude]]" 
                  zoom="10"
                  api-key="[[myApiKey]]"  
                  on-google-map-ready= '_mapLoaded' 
                  additional-map-options='{"gestureHandling" : "greedy"}'
                  >
                 <google-map-marker map="{{map}}" slot="marker" latitude="{{latitude}}" longitude="{{longitude}}"
                      title="You are here !" icon="./src/image/gpslocc.png" draggable="true">
                 </google-map-marker>
                 <template is="dom-repeat" items="{{sprof}}" as="item">
                        <google-map-marker map="[[map]]" slot="marker" latitude="[[item.myLat]]" longitude="[[item.myLng]]" animation="DROP"  click-events  title="{{item.prof}}" icon="{{calculateIconType(item.isFree)}}" on-google-map-marker-click='showUserDetail' userid="[[item.uid]]" isFree="{{item.isFree}}" >
                        </google-map-marker>

                 </template>
                 <paper-fab icon="maps:my-location" on-tap="updateCurrentPosition"></paper-fab>
                </google-map>
        </div>

  </template>

此代码在以前的聚合物中运行完美。还有一点，当我将依赖项安装为 bower install --save GoogleWebComponents/google-map

bower 向我要两个：

 - Unable to find a suitable version for polymer, please choose one by typing one of the numbers below: 
 I chose :  7) polymer#^2.0.0 which resolved to 2.0.1 and is required by myApp
    - Unable to find a suitable version for webcomponentsjs, please choose one by typing one of the numbers below:
I chose : 2) webcomponentsjs#^1.0.0 which resolved to 1.0.1 and is required by myApp

提前抱歉，我写了详细的代码。同时，我尝试了很多选项，但无法在我的 jj-maps 元素中渲染地图（class 基本模板，即使我尝试过旧模板（与 polymer 1.7 ver 相同）

这是控制台警告：

dom-module.html:24 dom-module google-map has style outside template
dom-module google-map-marker has style outside template

地图未呈现...

那么，如何解决呢？提前致谢。（之前的聚合物版本在 jobijoy.com

工作

Answer 1

我遇到了完全相同的问题。尝试按照某人的建议将 slot="marker" 添加到 google-map-marker Polymer 2.0 issue in github 但对我不起作用。看起来 google-map 组件的大小被设置为 0 x 0，因此根本不显示。由于 google 组件未更新为与 Polymer 2.0 兼容。我手动更新了 google-map.html 和 google-map-marker.html 文件夹下的 bower_component 文件，并将样式标签移到了模板标签中。警告消失，现在显示地图。我想我们必须等待 google 组件的更新才能正常工作。希望对您有所帮助。

Answer 2

slot="marker"

应该可以解决问题。

遗憾的是代码中的示例没有插入这一重要行。

这里是没有 slot="markers" 当前的代码示例：

<google-map latitude="37.77493" longitude="-122.41942" fit-to-markers>
    <google-map-marker latitude="37.779" longitude="-122.3892" draggable="true" title="Go Giants!">
    </google-map-marker>
    <google-map-marker latitude="37.777" longitude="-122.38911">
    </google-map-marker>
</google-map>

下面建议的更正示例应该在代码中：

<google-map latitude="37.77493" longitude="-122.41942" fit-to-markers>
    <google-map-marker slot="markers" latitude="37.779" longitude="-122.3892" draggable="true" title="Go Giants!">
    </google-map-marker>
    <google-map-marker slot="markers" latitude="37.777" longitude="-122.38911">
    </google-map-marker>
</google-map>

发生了什么事？

google-map 不知道标记何时被插入或更新，因为没有属性 slot="markers" 它们被插入到它们应该插入的插槽之外。

此问题可能会导致多种后果：可以查看地图，但无法响应重要事件，例如适合标记。

在优秀的 google-map webcomponent 从最初的无槽版本到当前有槽版本（并很快转向 polymer 3.0 版本）的这些动荡中，忙碌的开发人员很有可能只是忘记在显示如何在 google-map.

中添加每个新的 google-map-marker webcomponent 的示例中添加这个重要的 slot="markers" 属性

这只是对上面已经正确的答案的补充。如果有人需要更多解释，我提供这些，如果我是正确的，当然（如果我得出错误的结论，请纠正我）。

您可以通过检查 google-map 元素来检测此缺陷。没有slot="markers"修正，打开google-map；在里面，打开熨斗选择器；最后在其中打开元素 <slot id="markers" name="markers"><slot>。如果您不使用建议的更正，则此插槽将为空。如果您使用此建议的更正，此插槽将包含对每个 google-map-marker 的引用。因此 google-map 元素将能够处理几个依赖于检测每个标记何时插入或更新的事件。

抱歉回答太长了。

如何在 polymer#^2.0 中包含 google-map，因为它在 polymer 1.7 中工作

how to include google-map in polymer#^2.0 as it was working in polymer 1.7

google-maps

polymer

polymer-2.x