Как создать пользовательский маркер для карты google

Question

Мне нужно создать пользовательский маркер для Карты Google, который я использую для своего веб-сайта. Я не хочу использовать изображение или полигоны для маркера, но скопируйте маркер в html и добавьте его на карту. Пожалуйста, предложите возможные способы его реализации.

Answer 1

Вам нужно будет использовать настраиваемый объект Overlay.

here - хороший учебник, который показывает, как это можно сделать.

Answer 2

Перейти на этот сайт демо-цели: http://easysublease.org/mapcoverjs/

Он показывает, как один разработчик может просто написать шаблон HTML и CSS, а затем указать JavaScript обработчиков событий для создания полностью настраиваемые, полностью HTML, указанных маркеров на карте.

Если вам нужно больше, вы можете перейти на его Github см readme.md: https://github.com/bovetliu/mapcover

------- подробно способ объяснить, как это работает ----------- ---

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

<div class="mc-static2mapcanvas customized-marker"> 
    <div class="content"><%= displayedText %></div> 
    <div class="text-center remove-background"> 
    <span aria-hidden="true" class="glyphicon glyphicon-triangle-bottom"> 
    </span> 
    </div> 
</div> 

Затем вам нужно CSS/Less стиль его, не так ли? так же, как укладка один общий РОМ на странице:

.customized-marker{ 
    background-color: rgba(0, 255, 255, 0); 
    .content{ 
    background-color: #FF5A5F; 
    color: #fff; 
    padding:0px 5px; 
    font-size: 14px; 
    } 
    .remove-background{ 

    padding: 0px; 
    margin: 0px; 
    margin-top: -4px; 
    color:#FF5A5F; 
    background-color: rgba(255, 255, 255, 0); 
    } 
} 
.customized-marker.customized-marker-hover{ 
    .content{ 
    background-color: #252525; 
    } 
    .remove-background{ 
    color:#252525; 
    } 
} 

Тогда вы можете импортировать Mapcover.js и его зависимости на страницу, содержащую карту.

Пожалуйста, обратитесь к index.html, указанному в его Github.

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

var custom_marker_option = { 
    anchor: null, 
    datacontent:{"displayedText":"This Marker1"}, 
    latLng: new google.maps.LatLng(-34.397, 150.644), 
    map: mapcover.model.get("map"), 
    mouseover:function(container_node){ 
    console.log("marker heard mouseover"); 
    // console.log(event.latLng); 
    // console.log(container_node); 
    var dom = container_node.childNodes[0]; 
    dom.classList.add("customized-marker-hover"); 
    }, 
    mouseout:function(container_node){ 
    console.log("marker heard mouseout"); 
    // console.log(event.latLng); 
    // console.log(container_node); 
    var dom = container_node.childNodes[0]; 
    dom.classList.remove("customized-marker-hover"); 
    }, 
    click:function(container_node){ 
    console.log("you clicked me"); 
    } 
}; 

Затем вы начинаете один класс унаследовать «CustomMarker» класс обеспечивается mapcover .js, как это:.

mapcover.initCustomMarker("CustomMarker1" , _.template($('#customMarkerTemplate').html() )); 

Пожалуйста, быть в курсе, что $ ('# customMarkerTemplate') HTML() дается в начале этого ответа.

и _.template - это всего лишь одна функция шаблона, предоставляемая Underscore.js. Вы можете выбрать любую функцию компиляции шаблона, которая вам нравится.

Сейчас идет окончательный захватывающий маркер, создавая

var temp_marker_controller = mapcover.addCustomMarker("CustomMarker1" ,custom_marker_option); 

Теперь вы создали один настроенный маркер, заданный шаблон HTML и CSS, и вы также добавили обработчики событий к нему!