#google-maps-api-3 #polymer #google-maps-markers #polymer-1.0 #google-web-component
#google-maps-api-3 #полимер #google-карты-маркеры #полимер-1.0 #google-веб-компонент
Вопрос:
Я пытаюсь создать пользовательский значок «маркер карты» внутри пользовательского элемента <google-map> , используя библиотеку веб-компонентов Polymer.
- Как я могу использовать анимированный GIF-файл?
- Как мне использовать анимацию CSS?
Я пробовал оба, но потерпел неудачу.
Вот что у меня есть на данный момент…
Polymer({
is: 'css-marker'
}); * {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: sans-serif;
}
html,
body {
height: 100%; min-height: 100%; background: #999;
}
main { width: 90%; min-height: 100%; height: 100%; margin: 0 auto; }
section { background: #fff; width: 44%; min-height: 100%; float: left; margin: 0 .5rem; }
article { padding: 1rem 3rem 0; }
div { margin: 0 0; text-align: center; }
p { padding: 1rem; }
h1 { padding: 2rem 0; text-align: center; background: #f2f2f2; font-weight: normal; border-top: 7px solid #999; }
h2 { margin: 2rem 0 .25rem; }
.info { padding: 1rem; }
.google-map { margin: 0 !important; position: relative; width: 100%; height: 300px; }
/* Pulse animation */
figure { text-align: center; height: 50px; position: relative; z-index: 1; }
.pulsate { position: relative; display: inline-block; -moz-transform: scale(1.4); -webkit-transform: scale(1.4); transform: scale(1.4); text-align: center; }
.pulsate:before { content: ""; display: block; background: black; width: 10px; height: 10px; border: 5px solid lime; border-radius: 100%; position: absolute; top: 0; left: 0; z-index: 10; }
.pulsate:after { content: ""; display: block; background: transparent; border: 10px solid lime; border-radius: 60px; height: 50px; width: 50px; position: absolute; top: -25px; left: -25px; opacity: 0; z-index: 1;
-moz-animation: pulse 1.5s infinite ease-out;
-webkit-animation: pulse 1.5s infinite ease-out;
animation: pulse 1.5s infinite ease-out; }
/* Animation */
@-moz-keyframes pulse {
0% { -moz-transform: scale(0); opacity: 0.0; }
25% { -moz-transform: scale(0); opacity: 0.1; }
50% { -moz-transform: scale(0.1); opacity: 0.3; }
75% { -moz-transform: scale(0.5); opacity: 0.5; }
100% { -moz-transform: scale(1); opacity: 0.0; }
}
@-webkit-keyframes pulse {
0% { -webkit-transform: scale(0); opacity: 0.0; }
25% { -webkit-transform: scale(0); opacity: 0.1; }
50% { -webkit-transform: scale(0.1); opacity: 0.3; }
75% { -webkit-transform: scale(0.5); opacity: 0.5; }
100% { -webkit-transform: scale(1); opacity: 0.0; }
}
@keyframes pulse {
0% { transform: scale(0); opacity: 0.0; }
25% { transform: scale(0); opacity: 0.1; }
50% { transform: scale(0.1); opacity: 0.3; }
75% { transform: scale(0.5); opacity: 0.5; }
100% { transform: scale(1); opacity: 0.0; }
} <base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link rel="import" href="google-map/google-map.html">
<link rel="import" href="google-map/google-map-marker.html">
<dom-module id="css-marker">
<template>
<main>
<!-- GOOGLE MAP
------------------------->
<section>
<h1>Polymer: Animated GIF map marker?</h1>
<div class="info">
<p>This is the same animated GIF image that you see in the map below, but it's not working in the map?</p>
<img src="http://www.firepineapple.com/application/views/images/map_marker.gif" alt="">
</div>
<div class="google-map">
<google-map
disable-default-ui
fit-to-markers
latitude="30.236045"
longitude="-93.314282"
zoom="17"
api-key="AIzaSyA5SYKRx5yogz5_NUsMvQtCy1plDAamKYE"
class="hero-image">
<google-map-marker
latitude="30.236045"
longitude="-93.314282"
icon="http://www.firepineapple.com/application/views/images/map_marker.gif">
</google-map-marker>
</google-map>
</div>
</section>
<!-- GOOGLE MAP
------------------------->
<section>
<h1>Polymer: CSS animation map marker?</h1>
<div class="info">
<p>The same animation is pasted below inside the map marker, but it's default icon shows up instead?</p>
<figure>
<div class="pulsate"></div>
</figure>
</div>
<div class="google-map">
<google-map
disable-default-ui
fit-to-markers
latitude="30.236045"
longitude="-93.314282"
zoom="17"
api-key="AIzaSyA5SYKRx5yogz5_NUsMvQtCy1plDAamKYE"
class="hero-image">
<google-map-marker latitude="30.236045" longitude="-93.314282">
<figure>
<div class="pulsate"></div>
</figure>
</google-map-marker>
</google-map>
</div>
</section>
</main>
</template>
</dom-module>
<!-- Custom Element
---------------------------------------->
<css-marker></css-marker> Ответ №1:
<google-map-marker> не устанавливает optimized параметр при создании Marker . Маркер карты по умолчанию включает оптимизацию, что предотвращает анимированные GIF-файлы:
optimizedОптимизация отображает множество маркеров как один статический элемент. Оптимизированный рендеринг включен по умолчанию. Отключите оптимизированный рендеринг для анимированных GIF-файлов или PNG-файлов, или когда каждый маркер должен отображаться как отдельный элемент DOM (только для расширенного использования).
К счастью, у Marker класса есть setOptions() API для изменения параметров маркера после создания экземпляра. Вот как отключить оптимизацию для маркеров карты:
- Настройте прослушиватель событий для
<google-map>.google-map-readyсобытия, чтобы убедиться, что карта полностью загружена, прежде чем обращаться к маркерам. - В обработчике событий выполните итерацию,
<google-map>.markersчтобы получить массив<google-map-marker>s на карте. - Для каждого маркера получите
Markerэкземпляр из<google-map-marker>.markerи вызовитеsetOptions({optimized: false})экземпляр.
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
listeners: {
'map.google-map-ready': '_disableMarkerOptimization'
},
_disableMarkerOptimization: function() {
this.$.map.markers.forEach(m => {
m.marker.setOptions({optimized: false});
});
}
});
}); <head>
<base href="https://polygit.org/polymer 1.7.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="google-map/google-map.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
google-map {
height: 100vh;
width: 100vw;
}
</style>
<google-map id="map"
disable-default-ui
fit-to-markers
latitude="30.236045"
longitude="-93.314282"
zoom="17"
api-key="AIzaSyA5SYKRx5yogz5_NUsMvQtCy1plDAamKYE">
<google-map-marker latitude="30.236045"
longitude="-93.314282"
icon="http://www.firepineapple.com/application/views/images/map_marker.gif">
</google-map-marker>
</google-map>
</template>
</dom-module>
</body> Комментарии:
1. Отлично! Спасибо за объяснение. Как насчет анимации CSS и / или добавления a
<custom-element>внутри<google-map-marker>? Из примера Polymer docs 2nd он показывает<img>тег внутри маркера карты, однако при попытке сделать это он не работает. Пример здесь: elements.polymer-project.org/elements /… )2. AFAIK, Google Maps в настоящее время не поддерживает анимацию CSS для пользовательских маркеров. Содержимое
<google-map-marker>предназначено для информационного окна маркера (нажмите маркер, чтобы открыть), которое поддерживает анимированные GIF-файлы и пользовательские элементы. Смотрите codepen .3. Ах! Я вижу, я вижу. Спасибо, чувак! Вы были очень полезны. Ответ принят.
4. @Oneezy Нет проблем 🙂