Google Maps api - 标记的标签

Question

我想在我的网站上包含一个自定义地图，主要部分一切正常，除了一件事。

红色标记需要一个标签，虽然我可以添加一个图标并将其用作标记，但我想添加没有额外图像的标签。

另外我不想使用额外的插件。

如果这不起作用：是否可以将mapoptions添加到标准嵌入地图？ 唯一的缺点是它在滚动时会放大。

---

当前地图的外观：

---

标记标记应具有：

勃兰登堡门 - Google 地图

---

HTML：

<div id="googleMap"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Javascript (jQuery):

$(function() {

    function showMap() {

        var mapZoom = 14;
        var LatLng = new google.maps.LatLng(52.516275, 13.377704);

        var mapOptions = {
            zoom: mapZoom,
            center: LatLng,
            streetViewControl: false,
            scrollwheel: false,
            navigationControl: false,
            mapTypeControl: false,
            scaleControl: false,
            keyboardShortcuts: false

        };

        var map = new google.maps.Map(document.getElementById('googleMap'),mapOptions);

        var marker = new google.maps.Marker({
            position: LatLng,
            map: map,
            draggable: false
        });
    }
    google.maps.event.addDomListener(window, 'load', showMap);

});

Answer 1

试试这个代码：

<style type="text/css">
   .labels {
     color: white;
     background-color: red;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     text-align: center;
     width: 10px;     
     white-space: nowrap;
   }
 </style>

 var latLng = new google.maps.LatLng(49.47805, -123.84716);
 var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

 var map = new google.maps.Map(document.getElementById('map_canvas'), {
   zoom: 12,
   center: latLng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
 });

 var marker = new MarkerWithLabel({
   position: homeLatLng,
   map: map,
   labelContent: "BrandenBurger Tor",
   labelAnchor: new google.maps.Point(22, 0),
   labelClass: "labels" // the CSS class for the label
 });

要向标记添加更多可自定义的功能，请参阅此链接。

希望这可以帮助！！

Answer 2

创建自定义标记的方法是通过在画布中绘制来绘制所需的图像，然后将 SetIcon 函数与画布中的 DataURL 一起用作参数。

// A way to create a GoogleMap marker with text 

enter code here

 var marker = new google.maps.Marker({position: new google.maps.LatLng(35.1,32), title: "My Custom Marker" }); 

var cnv=document.createElement("canvas"); 
var cntx = cnv.getContext("2d"); 
cnv.width=50; 
cnv.height=50; 
cntx.fillText("Hello World!",10,10); 

marker.setIcon(cnv.toDataURL('image/jpeg')); '

Answer 3

您可以像这样使用label of google marker ：

new google.maps.Marker({
                position:latlng,
                map:map,
                label: 'A'
            });

Answer 4

一种选择是使用InfoBox第三方库并将 InfoBox 的位置绑定到标记。

var labelText = "Brandenburger Tor";

var myOptions = {
  content: labelText,
  boxStyle: {
    border: "none",
    textAlign: "center",
    fontSize: "12pt",
    fontWeight: "bold",
    width: "150px",
    color: "#C70E20"

  },
  disableAutoPan: true,
  pixelOffset: new google.maps.Size(10, -10),
  position: LatLng,
  closeBoxURL: "",
  isHidden: false,
  pane: "mapPane",
  enableEventPropagation: true
};

var ibLabel = new InfoBox(myOptions);
ibLabel.open(map);
var marker = new google.maps.Marker({
  position: LatLng,
  map: map,
  draggable: false
});
marker.bindTo('map', ibLabel);
marker.bindTo('position', ibLabel);

概念证明小提琴

代码片段：

 $(function() { function showMap() { var mapZoom = 14; var LatLng = new google.maps.LatLng(52.516275, 13.377704); var mapOptions = { zoom: mapZoom, center: LatLng, streetViewControl: false, scrollwheel: false, navigationControl: false, mapTypeControl: false, scaleControl: false, keyboardShortcuts: false }; var map = new google.maps.Map(document.getElementById('googleMap'), mapOptions); var labelText = "Brandenburger Tor"; var myOptions = { content: labelText, boxStyle: { border: "none", textAlign: "center", fontSize: "12pt", fontWeight: "bold", width: "150px", color: "#C70E20" }, disableAutoPan: true, pixelOffset: new google.maps.Size(10, -10), position: LatLng, closeBoxURL: "", isHidden: false, pane: "mapPane", enableEventPropagation: true }; var ibLabel = new InfoBox(myOptions); ibLabel.open(map); var marker = new google.maps.Marker({ position: LatLng, map: map, draggable: false }); marker.bindTo('map', ibLabel); marker.bindTo('position', ibLabel); } google.maps.event.addDomListener(window, 'load', showMap); });

 html, body, #googleMap { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js"></script> <script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script> <div id="googleMap"></div>

Answer 5

我知道这是一个老问题，但我遇到了同样的问题，我发现您可以使用属性className将类附加到标签。 更多在这里。

例子：

marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      label: {
            text: "Hello World",
            color: "#203334",
            fontWeight: "bold",
            fontSize: "16px",
            className: "map-label"
      }
});