带有标签的google maps api标记 [英] google maps api marker with label

问题描述

我有

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控制台不断给我一个错误.

This marker in my JavaScript file, but java console keep giving me an error.

Uncaught ReferenceError: MarkerWithLabel is not defined

我认为MarkerWithLabel是Google Maps api的内置工具.但这是行不通的.

I thought MarkerWithLabel is the built-in of the google maps api. But it doens't work.

推荐答案

MarkerWithLabel不属于 MarkerWithLabel .

MarkerWithLabel is not part of the Google Maps Javascript API v3, it is in a third party library MarkerWithLabel.

新位置(GitHub): https://github.com/googlemaps/js-markerwithlabel

一种迹象表明，如果它是API的一部分，它将是google.maps.MarkerWithLabel.

One indication is that if it was part of the API it would be google.maps.MarkerWithLabel.

(有关示例和文档，请参见GitHub页面)

(see the GitHub page for examples and documentation)

小提琴

代码段:

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>

这篇关于带有标签的google maps api标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！