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

Question

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

我需要这样的东西：

Answer 1

使用 google 信息 window 中内置的地图。这是 jQuery 中的示例：

var infoContent = "<h1>Your Detailed Information Here</h1>";

var infoWindow = new google.maps.InfoWindow({
    content: infoContent
});

marker.addListener('click', function () {
    infoWindow.open(map, marker);
});

然后您可以根据自己的喜好 CSS

设置信息 window 的样式

Answer 2

您可以创建自定义图标，如下图所示 - 根据您的需要使用其他图片 URL。

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

然后在创建标记时，使用 image 对象作为 icon 属性。有关详细信息，请参阅 maps API documentation for complex icons.

在下面的代码片段中查看实际效果：

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>

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

create a google map marker containing price

javascript

google-maps

google-maps-api-3

google-maps-markers