带有标签的谷歌地图 api 标记

Question

我有

var marker = new MarkerWithLabel({
            position: uav.Position,
            icon: mapStyles.uavSymbolBlack,
            labelContent: uav.Callsign + 
              '<div style="text-align: center;"><b>Alt: </b>' + uav.Alt + 
              '<br/><b>Bat: </b>' + 
              uav.Battery + '</div>',
            labelAnchor: new google.maps.Point(95, 20),
            labelClass: "labels",
            labelStyle: { opacity: 0.75 },
            zIndex: 999999,})

我的 JavaScript 文件中有这个标记，但 java 控制台一直给我一个错误。

Uncaught ReferenceError: MarkerWithLabel is not defined

我认为 MarkerWithLabel 是谷歌地图 API 的内置功能。但它不起作用。

Answer 1

MarkerWithLabel 不是Google Maps Javascript API v3 的一部分，它在第三方库MarkerWithLabel 中。

新位置（GitHub）： https://github.com/googlemaps/js-markerwithlabel

一个迹象是，如果它是 API 的一部分，它将是 google.maps.MarkerWithLabel。

（有关示例和文档，请参见 GitHub 页面）

fiddle

代码sn-p：

var map;

function initialize() {
    map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var marker = new MarkerWithLabel({
        position: map.getCenter(),
        // icon: mapStyles.uavSymbolBlack,
        labelContent: "uav.Callsign" + '<div style="text-align: center;"><b>Alt: </b>' + "uav.Alt" + '<br/><b>Bat: </b>' + "uav.Battery" + '</div>',
        labelAnchor: new google.maps.Point(95, 20),
        labelClass: "labels",
        labelStyle: {
            opacity: 0.75
        },
        zIndex: 999999,
        map: map
    })
}
google.maps.event.addDomListener(window, "load", initialize);

html, body, #map_canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}
.labels {
    background-color: white;
    border-style: solid;
    border-width: 1px;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://unpkg.com/@googlemaps/markerwithlabel/dist/index.min.js"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>