首页 > javascript > 使用Google Maps Javascript API添加标记,使其看起来与maps.google.com中添加的标记完全相同

使用Google Maps Javascript API添加标记,使其看起来与maps.google.com中添加的标记完全相同 (Add marker with Google Maps Javascript API to look exactly as marker that were added in maps.google.)

问题

我正在尝试使用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"
    });
  }

解决方法

要自定义标签文本,请参阅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)
  }
});

概念证明小提琴

红色文字标记

代码段:

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"></script>
<div id="map"></div>


问题

I am trying to add map to my site using Google Maps Javascript API. I want it to looks exactly like map that was created with maps.google.com:

enter image description here

But I can not achieve this result, just this:

enter image description here

So my question is: how to add red dot at the bottom of a marker, and how to make title to be written on the right side of this dot in bold?

This is my code:

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

解决方法

To customize the label text see the documentation for the markerLabel anonymous object. To control the position of the label, you need to use the 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"
  }
});

To add the "red dot" ("measle") at the bottom of the marker, the simplest way is to create another marker at the same location (although you could create an icon for your marker that includes both the measle and the default red "bubble" marker).

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

red text marker

code snippet:

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"></script>
<div id="map"></div>

相似信息