javascript - 使用 Google Maps Javascript API 添加标记，使其看起来与在 maps.google.com 中添加的标记完全一样

Question

我正在尝试使用 Google Maps Javascript API 将 map 添加到我的网站。我希望它看起来与使用 maps.google.com 创建的 map 完全一样:

但我无法实现这个结果，只是这样:

所以我的问题是:如何在标记的底部添加红点，以及如何将标题以粗体写在该点的右侧？

这是我的代码:

function initMap() {
    var coordinates = { lat: 40.785845, lng: -74.020496 };
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 14,
        center: coordinates,
        scrollwheel: false
    });
    var marker = new google.maps.Marker({
        position: coordinates,
        map: map,
        label: "5409 Madison St"
    });
  }

Answer 1

要自定义标签文本，请参阅 markerLabel 的文档匿名对象。要控制标签的位置，需要使用 Icon labelOrigin属性(property)。

var marker = new google.maps.Marker({
  position: coordinates,
  map: map,
  icon: {
    url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png",
    labelOrigin: new google.maps.Point(75, 32),
    size: new google.maps.Size(32,32),
    anchor: new google.maps.Point(16,32)
  },
  label: {
    text: "5409 Madison St",
    color: "#C70E20",
    fontWeight: "bold"
  }
});

要在标记底部添加“红点”(“麻疹”)，最简单的方法是在同一位置创建另一个标记(尽管您可以为标记创建一个同时包含麻疹和默认的红色“气泡”标记)。

var measle = new google.maps.Marker({
  position: coordinates,
  map: map,
  icon: {
    url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
    size: new google.maps.Size(7, 7),
    anchor: new google.maps.Point(4, 4)
  }
});

proof of concept fiddle

代码片段:

function initMap() {
  var coordinates = {
    lat: 40.785845,
    lng: -74.020496
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: coordinates,
    scrollwheel: false
  });
  var measle = new google.maps.Marker({
    position: coordinates,
    map: map,
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(3.8, 3.8)
    }
  });
  var marker = new google.maps.Marker({
    position: coordinates,
    map: map,
    icon: {
      url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png",
      labelOrigin: new google.maps.Point(75, 32),
      size: new google.maps.Size(32, 32),
      anchor: new google.maps.Point(16, 32)
    },
    label: {
      text: "5409 Madison St",
      color: "#C70E20",
      fontWeight: "bold"
    }
  });
}
google.maps.event.addDomListener(window, "load", initMap);

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>