自定义Google Map API V3标记标签

Question

function initMap() {
  var uluru = {lat: 13.676442, lng: 100.638276};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 17,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    label: {
      text: "$300k",
      color: "#4682B4",
      fontSize: "30px",
      fontWeight: "bold"
    },
    title: "Hello World!",
    visible: true
  });
}

我要自定义标签。我尝试在Google文档中找到答案，它们只有几个要更改的属性（https://developers.google.com/maps/documentation/javascript/3.exp/reference#MarkerOptions），然后我在Google上搜索最多的答案是MarkerWithLabel，但问题是该链接不再起作用http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js，所以我无法使用该库，我会附上我的代码和我想要的图片，请问有人能帮我吗？

Answer 1

您可以使用label.classNamekey 添加您自己的类：

map: map,
draggable: true,

label: {
        
    text: value.title,
    className: 'marker-label',
      
}

但您必须知道 Google 以编程方式为每个标记添加了另一种样式：

color: rgb(0, 0, 0);
font-size: 14px;
font-family: Roboto, Arial, sans-serif;

因此，您必须根据 @vikashvishwakarma 的答案，以编程方式自己重写它的值，而不是在 css 中，因为样式作为类具有更高的优先级。

Answer 2

很久以前不推荐使用Google代码。Google Code上托管的所有Google Maps API项目都已迁移到Github。

您可以在以下位置找到带有标签实用程序库和其他实用程序库的标记：

https://github.com/googlemaps/v3-utility-library

希望能帮助到你！