Question

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

基本上我的html对象是一个cirle（或圆形图钉），中间是用户图片。

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

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

谢谢，Stefano

Answer 1

我意识到您已在评论中开发了自己的解决方案，但对于任何寻求更简单解决此问题的人，我建议您查看Marker With Label library。

库添加了一个DOM元素以及每个标记（旨在为每个项目添加文本标签，个人我总是用它来编号），可以很容易地利用它来放置图像每个地点。这可以用来代替Dr.Molle建议的标记，或者除此之外。您可以使用偏移选项将元素放置在与标记相关的位置，因此使用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

请注意，这些位置是任意的，可能需要进行一些调整。作为一个旁边（和无关），我真的喜欢除了标记之外使用头像的想法。

用HTML元素替换谷歌地图MARKER

1 个答案: