自定义谷歌地图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"，所以我无法使用该库。我附上了我的代码和想要的效果图片。请问有人能帮帮我吗？

- Joe

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中进行，因为样式比类具有更高的优先级。

- Acuna

---

谢谢！我使用了!important规则来强制类特定属性，然后通过指定任意图标来移除默认的图标。最后，我添加了一个::before元素来创建CSS指针以指向确切位置。 - Ajith Gopi

太好了，很高兴能帮到你！是的，当然可以在CSS中使用!important来精确覆盖其样式。 - Acuna

Answer 2

Google Code已经废弃很久了。所有托管在Google Code上的Google Maps API项目都已迁移到Github。

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

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

希望这能帮到您！

- xomena

Answer 3

您可以扩展google.maps.OverlayView类，以在地图上显示自定义类型的覆盖物对象。请参见示例代码。

此外，请查看官方示例和OverlayView API参考文档。

- andrii

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

- vikash vishwakarma

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

- quackymack87