自定义 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

键添加您自己的课程：

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

希望有帮助！

Answer 3

您可以扩展

google.maps.OverlayView

类以在地图上显示自定义类型的叠加对象。请参阅工作小提琴

另外，请参阅官方示例和OverlayView API参考

Answer 4

您可以通过在html字符串中定义来自定义对象，然后分配给该对象：

       let arrayElem = '<h4> Details</h4><br>Employee 
       ID:'+element.EmpID+'<br>Coordinates:'+element.lat+', 
       '+element.lng+'<br>Sequence ID:'+element.seqId+'<br> 
        <a>RouteID</a>:'+RouteId;


        let marker = {icon:'./assets/desticontest.png',
                      label:{text:element.seqId.toString(),
                             fontSize: "20px",
                              fontWeight: "bold",
                              color:'black'},
                      opacity:0.8,
                      infoWindow:arrayElem
                      };

Answer 5

Google 地图的呈现方式可能会帮助您： http://simplify.quedank.com/loop-google-maps-markers-and-coordinates-from-wordpress-posts/

这个想法是，最好将标记变量与 initMap() 分开。这样您就可以为标记创建一个单独的函数，然后使用 addListener 自动显示标签：

<!-- Create variable "map" -->
var map;
<!-- Initiate/render map with this function -->
function initMap() {
    <!-- Edit latitude and longitude coordinates to focus on a specific region on the map -->
    map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 35.7932977, lng: -78.6551929 },
        scrollwheel: false,
        zoom: 11
    });         
}
<!-- This is the function to add markers for each post. This includes the marker, the information window, and a function to show info when clicked -->
function addMarker(props) {
    var marker = new google.maps.Marker({
      position: props.coords,
      map: map
    });
    var infoWindow = new google.maps.InfoWindow({
        content: props.content
    });
    marker.addListener('load', function() {
        infoWindow.open(map, marker);
    });
}

然后使用“content”属性添加标签，如第 52 行所示。类似于：

addMarker({coords:{lat: 00000000000, lng: 00000000000}, content:'<h5>$2.3M</h5>'});