谷歌地图api标记与标签

时间:2015-02-24 02:11:19

标签: javascript google-maps google-maps-api-3 google-maps-markers

我有

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是google maps api的内置功能。但它没有用。

1 个答案:

答案 0 :(得分:4)

MarkerWithLabel不属于Google Maps Javascript API v3,它位于第三方库MarkerWithLabel

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

- documentation

- examples

fiddle

代码段:

&#13;
&#13;
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);
&#13;
html, body, #map_canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}
.labels {
    background-color: white;
    border-style: solid;
    border-width: 1px;
}
&#13;
<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>
&#13;
&#13;
&#13;