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

IT技术 javascript google-maps
2021-03-11 19:56:05

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

在此处输入图片说明

但我无法达到这个结果，就这样：

在此处输入图片说明

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

这是我的代码：

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"
    });
  }
1个回答

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

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

概念证明小提琴

红色文字标记

代码片段：

显示代码片段

其它你可能感兴趣的问题
上一篇Firestore 查询中的条件 where 子句 下一篇正则表达式在文本中查找 url