使用网络组件创建带有标记的谷歌地图 [英] creating a google map with marker using web-component
问题描述
以下是我的代码： $ b $
我试图使用聚合物和网络组件在Google地图中显示一些标记。 b <！DOCTYPE html>
< html>
< head lang =fr>
< meta charset =UTF-8>
< title>< / title>
< script src =bower_components / platform / platform.js>< / script>
< link rel =importhref =bower_components / polymer / polymer.html>
< link rel =importhref =bower_components / google-apis / google-apis.html>
< link rel =importhref =bower_components / google-map / google-map.html>
< script>
var airdromes = [
{
name：Anapa-Vityazevo，
icao：URKA，
country：RU ，
type：civ，
coord：{
纬度：44.995834，
经度：37.334445，
海拔： 147，
标题：41
}，
频率：{
tower：121，
tacan：
}
$ name $ b $ icao $ U $ $ $ $ $ $ $ $ $ $ $ $' $ btype：civ，
coord：{
纬度：41.6166667，
经度：41.589722223，
eleva和：
标题：125
}，
频率：{
tower：131，
tacan：16X BTM）
}
];
< / script>
< / head>
< body>
< h1> my-map< / h1>
< polymer-element name =my-map>
< template>
< style>
google-map {
display：block;
width：400px;
height：400px;
}
< / style>
< google-map map = {{map}} disableDefaultUI fitToMarkers>
< template repeat ={{airdrome in airdromes}}>
< / template>
< / google-map>
< / template>
< script>
Polymer（'my-map'，{
airdromes：airdromes，
ready：function（）{
console.log（'this.airdromes：'，this.airdromes） ;
}
}）;
< / script>
< / polymer-element>
< my-map>< / my-map>
< / body>
< / html>
谷歌地图的所有代码似乎都在这里，标记有迭代。
我唯一的问题是< google-map />当插入< polymer-element />时，不显示宽度和高度。但确定如果我单独调用它。
感谢您的帮助。
编辑
好吧，经过更多的研究和测试，我终于实现了这一点。
1.导入google-apis.html，因为它似乎有助于加载谷歌地图
2.我的谷歌地图样式在文档的头部，我把它放在第一个<之后;模板>并在<谷歌地图>之前
3.我拼错了fittomarker，并改用它的好名字和tada！
代码已被更正。
Polymer 1.0的工作方式不同，您需要创建两个HTML页面。
以下是代码：
Index.html
<！DOCTYPE html>
< html>
< head>
< meta charset =UTF-8>
< title> Google地图< / title>
< link rel =importhref =bower_components / google-apis / google-apis.html>
< link rel =importhref =bower_components / google-map / google-map.html>
< link rel =importhref =mappa.html>
< / head>
< body>
< my-map>< / my-map>
< / body>
< / html>
Mappa.html
< dom-module id =my-map>
< template>
< style>
google-map {
display：block;
宽度：100％;
身高：100％;
}
< / style>
< google-map map ={{map}}disableDefaultUI fitToMarkers>
< template is =dom-repeatitems ={{marker}}>
< google-map-marker map = {{map}} latitude ={{item.latitudine}}longitude ={{item.longitudine}}>
< / google-map-marker>
< / template>
< / google-map>
< / template>
< script>
Polymer（{
是：'my-map'，
ready：function（）{
this.marker = [
{latitudine：'41 .223596'，longitudinal ：'16 .296087'}，
{纬向：'41 .222450'，纵向：'16 .291259'}
];
}
}）;
< / script>
I'm trying to use polymer and web-component to display some markers in the google-map.
Here's my code :
<!DOCTYPE html>
<html>
<head lang="fr">
<meta charset="UTF-8">
<title></title>
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/google-apis/google-apis.html">
<link rel="import" href="bower_components/google-map/google-map.html">
<script>
var airdromes = [
{
"name" : "Anapa-Vityazevo",
"icao" : "URKA",
"country" : "RU",
"type" : "civ",
"coord" : {
"latitude" : 44.995834,
"longitude": 37.334445,
"elevation": 147,
"heading" : 41
},
"frequencies": {
"tower": 121,
"tacan": ""
}
},
{
"name" : "Batumi",
"icao" : "UGSB",
"country" : "GE",
"type" : "civ",
"coord" : {
"latitude" : 41.6166667,
"longitude": 41.589722223,
"elevation": 32,
"heading" : 125
},
"frequencies": {
"tower": 131,
"tacan": "16X (BTM)"
}
}
];
</script>
</head>
<body>
<h1>my-map</h1>
<polymer-element name="my-map">
<template>
<style>
google-map {
display: block;
width: 400px;
height: 400px;
}
</style>
<google-map map={{map}} disableDefaultUI fitToMarkers>
<template repeat="{{airdrome in airdromes}}">
<google-map-marker map={{map}} latitude="{{airdrome['coord']['latitude']}}"
longitude="{{airdrome['coord']['longitude']}}"></google-map-marker>
</template>
</google-map>
</template>
<script>
Polymer('my-map', {
airdromes: airdromes,
ready : function() {
console.log('this.airdromes :', this.airdromes);
}
});
</script>
</polymer-element>
<my-map></my-map>
</body>
</html>
It's seems that all the code for the google-map is here, there are iteration for the markers.
The only problem I have is that the <google-map/> doesn't display, no width and no height when inserted in a <polymer-element/> but ok if I call it alone.
Thanks for the help.
EDIT
Ok, after even more research and tests I finally achieved this. 1. importing "google-apis.html" because it seems to help loading google-map 2. my google-map style was in the head of the document, I put it just after the first <template> and before the <google-map> 3. I misspelled "fittomarker" and change it with the good name and tada !
code has been corrected.
Polymer 1.0 works differently, you need to create two HTML pages. Here's the code:
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Google Map</title>
<link rel="import" href="bower_components/google-apis/google-apis.html">
<link rel="import" href="bower_components/google-map/google-map.html">
<link rel="import" href="mappa.html">
</head>
<body>
<my-map></my-map>
</body>
</html>
Mappa.html
<dom-module id="my-map">
<template>
<style>
google-map {
display: block;
width: 100%;
height: 100%;
}
</style>
<google-map map="{{map}}" disableDefaultUI fitToMarkers>
<template is="dom-repeat" items="{{marker}}">
<google-map-marker map={{map}} latitude="{{item.latitudine}}" longitude="{{item.longitudine}}">
</google-map-marker>
</template>
</google-map>
</template>
<script>
Polymer({
is: 'my-map',
ready: function() {
this.marker = [
{latitudine: '41.223596', longitudine: '16.296087'},
{latitudine: '41.222450', longitudine: '16.291259'}
];
}
});
</script>
这篇关于使用网络组件创建带有标记的谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
