创建一个包含价格的谷歌地图标记

Question

我正在创建一个房地产网站,其中的地图显示房屋的价格.我需要像airbnb.com上使用的标记一样的标记.我该怎么做？我用这个:

我需要这样的东西:

Answer 1

您可以创建自定义图标,如下图所示 - 根据需要使用其他图片网址.

var image = {
          url: 'http://www.homedepot.com/catalog/swatchImages/35/04/04a604de-8b52-4cd8-a394-6286f00b438d_35.jpg',
          // This marker is 35 pixels wide by 35 pixels high.
          size: new google.maps.Size(35, 35),
          // The origin for this image is (0, 0).
          origin: new google.maps.Point(0, 0),
          // The anchor for this image is the base of the flagpole at (0, 32).
          anchor: new google.maps.Point(0, 35)
        };

然后在创建标记时,使用图像对象作为图标属性.有关更多信息,请参阅复杂图标的maps API文档.

在下面的代码段中查看它的实际操作:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(41.385932, 2.178678),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var image = {
          url: 'http://www.homedepot.com/catalog/swatchImages/35/04/04a604de-8b52-4cd8-a394-6286f00b438d_35.jpg',
          // This marker is 35 pixels wide by 35 pixels high.
          size: new google.maps.Size(35, 35),
          // The origin for this image is (0, 0).
          origin: new google.maps.Point(0, 0),
          // The anchor for this image is the base of the flagpole at (0, 32).
          anchor: new google.maps.Point(0, 35)
        };
  var clickMarker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    draggable: true,
    icon: image,
    label: {
      text: "50€",
      color: 'white',
      fontSize: '15px',
      fontWeight: 'bold'
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>