Заменить google map MARKER с элементом HTML

Я хочу добавить пользовательский элемент HTML (который может стать прозрачным динамически) вместо маркера.Заменить google map MARKER с элементом HTML

В основном мой объект html был бы cirle (или закругленным штырем) с изображением пользователей посередине.

Я воображаемые различные решения:

место метку (содержащую HTML) покрытия маркер, который видимость будет установлен в ни работе с накладками трудный путь: замените маркер с PNG изображения, которые я должен составить динамически с какой-то библиотекой, накладывающей два изображения (одно геометрическое и другое изображение пользователя). В любом случае я не могу понять, что делать и как это сделать.

Спасибо, Стефано

источник

2014-02-21 Stefano Vespucci

Почему вы хотите использовать ярлык для маркера? Ярлык является обычным наложением, его можно использовать без маркера. Поэтому используйте ** вместо маркера. –

Спасибо Молле. Я выяснил, что лучшим решением для меня является создание образа base64 с холстом (в котором я могу наложить пути и изображения динамически) и поместить в параметр «icon:» маркера. Скоро я отправлю код, чтобы сделать это. –

Я понимаю, что вы разработали свои собственные решения в комментариях, но и для тех, кто ищет более простое решение этой проблемы, я хотел бы предложить, глядя в Marker With Label library.

Библиотека добавляет элемент DOM вместе с каждым маркером (предназначен для добавления ect текстовой метки в каждый элемент, лично я всегда использовал его для нумерации), который можно было легко использовать, чтобы позволить размещение изображения в каждом месте. Это можно использовать вместо маркера, как предлагает доктор Молл, или в дополнение к этому. Вы можете использовать опцию смещения, чтобы поместить элемент относительно маркера, и поэтому использование z-index может перекрывать изображение сверху.

Вот простой пример использования изображения в качестве метки, taken from here:

<style type="text/css"> 
    .labels { 
    color: white; 
    background-color: red; 
    font-family: "Lucida Grande", "Arial", sans-serif; 
    font-size: 10px; 
    text-align: center; 
    width: 100px;  
    white-space: nowrap; 
    } 
</style> 

var latLng = new google.maps.LatLng(49.47805, -123.84716); 
var homeLatLng = new google.maps.LatLng(49.47805, -123.84716); 

var map = new google.maps.Map(document.getElementById('map_canvas'), { 
    zoom: 12, 
    center: latLng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var pictureLabel = document.createElement("img"); 
pictureLabel.src = "home.jpg"; 

var marker = new MarkerWithLabel({ 
    position: homeLatLng, 
    map: map, 
    draggable: true, 
    raiseOnDrag: true, 
    labelContent: pictureLabel, 
    labelAnchor: new google.maps.Point(50, 0), 
    labelClass: "labels", // the CSS class for the label 
    labelStyle: {opacity: 0.50} 
}); 

var iw = new google.maps.InfoWindow({ 
    content: "Home For Sale" 
}); 
google.maps.event.addListener(marker, "click", function (e) { iw.open(map, this); });

Для позиционирования и наложения на изображения используйте следующие параметры:

labelStyle: {top: "-30px", left: "-3px"}, 
labelZIndex: 2

Обратите внимание, что позиции произвольны и может потребовать некоторой настройки. В качестве стороннего (и не связанного), мне очень нравится идея использования аватара в дополнение к маркеру.

источник

2014-02-21 10:01:54 Swires

Заменить google map MARKER с элементом HTML

ответ

Смежные вопросы