Question

我需要为我用于网站的Google地图创建自定义标记。我不想使用图像或多边形作为标记，但是在html中编码标记并将其添加到地图上。请提供可行的方法来实施它。

Answer 1

转到此演示目标网站：http://easysublease.org/mapcoverjs/

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

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

-------解释其运作方式的详细方式--------------

首先。要做好准备，你需要一个HTML块来指定你的标记是什么样的，例如:(这是一个Underscore模板，您可以选择任何模板，或者如果您的标记中不需要任何动态的东西，只需提供纯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来设计它，对吧？就像在页面上设计一个常见的dom一样：

.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及其依赖项导入包含地图的页面。

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

在创建自定义标记之前，您需要一个对象指定标记的位置及其事件处理程序，可能如下：

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

然后你启动一个类继承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指定的自定义标记，并且还为其添加了事件处理程序！

Answer 2

您需要使用自定义叠加对象。

Over here是一个很好的教程，展示了如何完成它。

如何为谷歌地图创建自定义标记

2 个答案: