用 HTML 元素替换 google map MARKER答案

【问题标题】：Replace google map MARKER with HTML element用 HTML 元素替换 google map MARKER
【发布时间】：2014-02-21 03:13:50
【问题描述】：

我想添加一个自定义 HTML 元素（可以动态变为透明）而不是标记。

基本上，我的 html 对象是一个圆圈（或圆形大头针），中间有一张用户图片。

我设想了不同的解决方案：

放置一个标签（包含 HTML）覆盖可见性将设置为无的标记使用叠加层困难的方法：用一个PNG图像替换标记，我应该使用某种叠加两个图像（一个几何图形和另一个用户图片）的库来动态组合。无论如何，我无法弄清楚该做什么以及如何去做。

谢谢，斯特凡诺

【问题讨论】：

为什么要为标记使用标签？标签是自定义覆盖，可以在没有标记的情况下使用。因此，请使用自定义叠加层而不是标记。
谢谢莫勒。我发现对我来说最好的解决方案是使用画布创建一个图像 base64（我可以在其中动态地叠加路径和图像）并放入标记的“icon：”参数中。很快我会发布代码来做到这一点。

标签： html google-maps icons label marker

【解决方案1】：

我知道您已经在 cmets 中开发了自己的解决方案，但对于任何寻求更简单解决方案的人，我建议您查看 Marker With Label library。

该库添加了一个 DOM 元素以及每个标记（旨在为每个项目添加一个文本标签等，我个人一直使用它来编号），可以很容易地用于允许将图像放置在每个位置。这可以用来代替 Dr.Molle 建议的标记，或者作为补充。您可以使用 offset 选项将元素相对于标记放置，因此使用 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

请注意，位置是任意的，可能需要进行一些调整。顺便说一句（并且不相关），我真的很喜欢在标记之外使用化身的想法。

【讨论】：