如何为谷歌地图创建自定义标记 [英] How to create custom marker for google map

问题描述

我需要为我的网站使用的Google地图创建自定义标记。我不想使用图像或多边形作为标记，而是使用html编码标记并将其添加到地图上。请提供可能的实现方式。

http://easysublease.org/mapcoverjs/

它显示了一个开发人员可以如何编写HTML模板和CSS，然后指定JavaScript事件处理程序在地图上创建完全自定义的完全HTML指定标记。

如果您需要更多，您可以访问它的Github，请参阅readme.md：
https://github.com/bovetliu/mapcover

< - >详细说明它的方式作品--------------

首先。要做好准备，您需要一个HTML块来指定标记的样子，
例如:(这是一个Underscore模板，您可以选择任何模板，或者如果您不需要任何动态的东西标记，只是提供纯HTML，但仍然需要把它变成编译模板函数）

 < div class =mc-static2mapcanvas定制的标记物> 
< div class =content><％= displayedText％>< / div> 
< div class =text-center remove-background> 
< span aria-hidden =trueclass =glyphicon glyphicon-triangle-bottom> 
< / span> 
< / div> 
< / div> 
  

然后你需要CSS / Less来设计它，对吧？就像在页面上设计一个共同的dom一样：

  .customized-marker {
 background-color：rgba（0， 255，255，0）; 
 .content {
 background-color：＃FF5A5F; 
颜色：#fff; 
 padding：0px 5px; 
 font-size：14px; 
} 
 .remove-background {
 
 padding：0px; 
 margin：0px; 
 margin-top：-4px; 
颜色：＃FF5A5F; 
 background-color：rgba（255,255,255,0）; 
} 
} 
 .customized-marker.customized-marker-hover {
 .content {
 background-color：＃252525; 
} 
 .remove-background {
 color：＃252525; 
} 
} 
  

然后，您可以导入Mapcover.js及其依赖项包含地图的页面。

请参阅Github上显示的index.html。

在创建自定义标记之前，您需要一个object指定标记在哪里，它的事件处理程序可能如下所示：

  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（你点了我）; 
} 
}; 
  

然后，您启动一​​个Class继承由mapcover.js提供的CustomMarker类，如下所示：

  mapcover.initCustomMarker（CustomMarker1，_.template（$（'＃customMarkerTemplate'）。html（）））; 
  

请注意，$（'＃customMarkerTemplate'）。html（）这个答案。

和_.template只是一个由Underscore.js提供的模板函数。你可以选择你喜欢的任何模板编译功能。

现在是最后一个令人兴奋的标记创建

  var temp_marker_controller = mapcover.addCustomMarker（CustomMarker1，custom_marker_option）; 
  

现在，您已经创建了一个由HTML模板和CSS指定的自定义标记，并且您还添加了事件handlers to it！

I need to create a custom marker for Google Map that i am using for my website. I don't want to use an image or polygons for marker, but code the marker in html and add it on the map. Please suggest possible ways to implement it.

解决方案

Go to this demo-purpose website: http://easysublease.org/mapcoverjs/

It shows how one developer can just write HTML template and CSS, then specify JavaScript Event handlers to create fully customized, Fully HTML specified markers on map.

If you need more, you can go to its Github see readme.md: https://github.com/bovetliu/mapcover

-------detailed way explaining how it works--------------

First. to be prepared, you need one HTML block to specify how you markers would be like, such as: (which is an Underscore template, you can choose whatever template, or if you don't need any dynamic thing in your marker, just supply pure HTML, but still needs turn it into compiled template function)

<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>

Then you need CSS/Less to style it, right? just like styling one common dom on page:

.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;
  }
}

Then you can import Mapcover.js and its dependencies to your page containing map.

Please refer the index.html shown at its Github.

Before creating your custom marker, you need one object specify where is the marker, and its event handlers, possibly, like this:

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");
  }
};

Then you initiate one Class inheriting "CustomMarker" Class provided by mapcover.js like this:

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

Please be aware of that, $('#customMarkerTemplate').html() is given at beginning of this answer.

and _.template is just one template function provided by Underscore.js. You can choose whatever template compiling function you like.

Now comes the final exciting marker creating

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

Now, you have created one customized marker specified by HTML template and CSS, and you have also added event handlers to it!

这篇关于如何为谷歌地图创建自定义标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！