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 documentation for complex icons。

请参阅下面的代码段中的操作：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用信息窗口中内置的谷歌地图。这是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

为信息窗口设置样式

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

2 个答案: