javascript - 自定义 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
  });
}

我想自定义标签。我尝试在谷歌文档中找到答案，他们只有很少的属性需要更改(https://developers.google.com/maps/documentation/javascript/3.exp/reference#MarkerOptions)然后我在谷歌上搜索最多的答案是 MarkerWithLabel 但问题是链接不再起作用 http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js “所以我不能使用图书馆。我附上了我的代码中的图片和我想要的东西。有人可以帮我吗？

Answer 1

您可以使用 label.className 添加自己的类(class) key :

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 中覆盖其值，因为样式作为类具有更高的优先级。