Создание карты Google с маркером с использованием веб-компонента
Я пытаюсь использовать полимер и веб-компонент для отображения некоторых маркеров на Google-карте.
Вот мой код:
<!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>
Кажется, что весь код для Google-карты здесь, есть итерация для маркеров.
Единственная проблема, с которой я сталкиваюсь, заключается в том, что
Спасибо за помощь.
РЕДАКТИРОВАТЬ
Хорошо, после еще большего количества исследований и испытаний я наконец достиг этого. 1. импортировать "google-apis.html", потому что кажется, что это помогает загрузить google-map 2. мой стиль google-map был в заголовке документа, я поместил его сразу после первого и перед
Код был исправлен.
1 ответ
Polymer 1.0 работает по-другому, вам нужно создать две HTML-страницы. Вот код:
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>