如何在聚合物＃^ 2.0中包含谷歌地图，因为它在聚合物1.7中工作 [英] how to include google-map in polymer#^2.0 as it was working in polymer 1.7
问题描述
在聚合物1.7中所有工作都完美之前，我已经包括api，升级到聚合物^ 2.0后谷歌地图无法呈现。
这里是我在主要应用页面写的聚合物类库的代码：
< iron-pages role =main selected =[[page]]attr-for-selected =nameselected-attribute =visiblefallback-selection =404>
< jj-infos name =infos>相关信息< / jj-infos>
< jj-contacts name =contacts>联系人< / jj-contacts>
< jj-messages name =messages>消息< / jj-messages>
< jj-404 name =404> 404< / jj-404>
< / iron-pages>
在jj-maps.html代码示例是：
< link rel =importhref =../ bower_components / polymer / polymer.html>
< link rel =importhref =../ bower_components / google-map / google-map.html>
< link rel =importhref =../ bower_components / google-map / google-map-marker.html>
模板代码中的样式代码：
< dom-module id =jj-maps>
< template>
< style include =iron-flex iron-flex-alignment>
：主机{
.....
google-map，#mapResults {
margin-top：10px;
职位：亲属;
身高：100vh;
width：100vh％;
z-index：1;
}
....
< div id =mapResults>
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 =markerlatitude ={{latitude}}longitude ={{longitude}}
title =你在这里 ！ icon =./ src / image / gpslocc.pngdraggable =true>
< / google-map-marker>
< template is =dom-repeatitems ={{sprof}}as =item>
< / template>
< / div>
< / template>
这个代码在以前的聚合物中是完美的。另一点，当我凉亭安装依赖关系为 bower install --save GoogleWebComponents / google-map
bower问我的两个为：
- 无法找到合适的聚合物版本，请通过输入以下数字之一选择一个：
我选择了：7）polymer＃^ 2.0.0解析为2.0.1，myApp需要
- 无法找到webcomponentsjs的合适版本，请通过输入下面的一个数字：
我选择了：2）webcomponentsjs＃^ 1.0.0解决为1.0.1，并且需要myApp
提前抱歉，我写了详细的代码。与此同时，我尝试了很多选项，但无法在我的jj-maps元素中渲染地图（类基本模板，甚至我尝试了传统模板（与聚合物1.7版本相同）
dom-module.html：24 dom-module google-map has outside template
dom-module google-map-marker具有外部样式
地图不渲染。 ..
所以，如何解决？提前致谢。（以前的聚合物版本在jobijoy.com上工作）
我有完全相同的问题。试图将google = map标记添加到google-map-marker中，因为有人建议 github中的聚合物2.0问题，但对我不起作用，看起来谷歌地图组件的大小因此被设置为0。根本不显示，因为谷歌组件没有更新与Polymer 2.0兼容。我已经手动更新了bower_component文件夹下的本地google-map.html和google-map-marker.html文件，并将样式标签移至模板标签中。警告消失，现在地图显示。我想我们必须等待谷歌组件的更新才能正常工作。我希望这有助于。
I have included api, before everything were working perfect in polymer 1.7, after upgraded to polymer ^2.0 google map does not renders. here is my code in main app page written 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>
at jj-maps.html code sample is :
<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">
style codes in template tag:
<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>
this code works perfect in previous polymer. And Another point when I bower install the dependencies as bower install --save GoogleWebComponents/google-map
bower asks me for two as :
- 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
Sorry in advance that I ve written detailed codes. Meanwhile I have tried many options but could not able to render map in my jj-maps elements (class base template, even I have tried legacy template (as same as polymer 1.7 ver)
Here is is console warning :
dom-module.html:24 dom-module google-map has style outside template
dom-module google-map-marker has style outside template
Maps are not rendering...
So, how to solve ? Thanks in advance. (previous polymer ver. working at jobijoy.com
I'm having exactly same issue. Tried to add slot="marker" to google-map-marker as someone suggested Polymer 2.0 issue in github but doesn't work for me. It looks like the google-map component's size is set to 0 by 0 thus does not display at all. Since the google components are not updated to be compatible with Polymer 2.0. I've manually updated my local google-map.html and google-map-marker.html files under bower_component folder and moved the style tags into the template tags. The warnings are gone and the map displays now. I guess we have to wait for the update of the google components for things to work properly. I hope this helps.
这篇关于如何在聚合物＃^ 2.0中包含谷歌地图，因为它在聚合物1.7中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
