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

Google代码很久以前就被弃用了。 Google代码托管的所有Google Maps API项目都迁移到了Github。

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

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

希望它有所帮助！

Answer 2

您可以扩展[ { "Value": "field4" } ]类以在地图上显示自定义类型的叠加层对象。参见working fiddle

另外，请参见official example和OverlayView API reference

Answer 3

SO 您可以通过在 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
                      };

自定义Google Map API V3标记标签

3 个答案: