【发布时间】：2017-11-20 07:38:19
【问题描述】：
我已经包含了 api，在聚合物 1.7 中一切正常之前，升级到聚合物 ^2.0 后，谷歌地图无法呈现。 这是我在主应用程序页面中编写的聚合物类库中的代码：
<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 元素中渲染地图（类基本模板，即使我尝试过旧模板（与聚合物 1.7 版本相同）
这是控制台警告：
dom-module.html:24 dom-module google-map has style outside template
dom-module google-map-marker has style outside template
地图未呈现...
那么，怎么解决呢？提前致谢。 （之前在 jobijoy.com 工作的聚合物版本
【问题讨论】：
标签： google-maps polymer polymer-2.x