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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/28687094/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 02:14:48  来源:igfitidea点击:

google maps api marker with label

javascriptgoogle-mapsgoogle-maps-api-3google-maps-markers

提问by Kaylee YunKyung Kim

I have

我有

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,})

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

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

Uncaught ReferenceError: MarkerWithLabel is not defined

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

我认为 MarkerWithLabel 是 google maps api 的内置。但它不起作用。

回答by geocodezip

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

MarkerWithLabel 不是Google Maps Javascript API v3 的一部分,它位于第三方库MarkerWithLabel 中

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

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

-documentation

-文件

-examples

-例子

fiddle

小提琴

code snippet:

代码片段:

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"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>