Question

我正在尝试在Google地图上显示带标签的标记。我正在使用markerwithlabel.js库，它允许我实现它。基本上我可以提交一些HTML + CSS作为标记标签，它将显示在地图上。

在这个意义上一切都很好，我只是想让它更好，并用图像标记显示标签和持续时间。

这就是目前的情况：

我想在蓝色圆圈的右侧显示Norwich \n 1hour。

你能帮我解决一下CSS和HTML吗？

HTML和JS：

        var markerHTML = '{0}<br>{1}'.format(places[i].name, '1hour');

        var marker = new MarkerWithLabel({
            position: new google.maps.LatLng(lat, lng),
            draggable: false,
            raiseOnDrag: true,
            map: map,
            labelContent: markerHTML,
            labelAnchor: new google.maps.Point(22, 0),
            labelClass: "labels", // the CSS class for the label
            labelStyle: {opacity: 1.0},
            icon: "images/markers/blue_circle.png"
        });

CSS：

.labels {
    font-family: "Lucida Grande", "Arial", sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    width: 100px;
    white-space: normal;
    word-spacing: 9999999px;

    display: inline;


    margin: 5%;
    color: #000000;

    filter:alpha(opacity=1);

}

Answer 1

更改LabelAnchor值以找到所需的标签：

var marker = new MarkerWithLabel({
    position: new google.maps.LatLng(lat, lng),
    draggable: false,
    raiseOnDrag: true,
    map: map,
    labelContent: markerHTML,
    labelAnchor: new google.maps.Point(-10, 15),
    labelClass: "labels", // the CSS class for the label
    labelStyle: {
        opacity: 1.0
    },
    icon: "images/markers/blue_circle.png"
});

proof of concept fiddle

代码段

＆＃13;

var geocoder;
var map;

function initialize() {
  var 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
    });
  geocoder = new google.maps.Geocoder();
  geocodeAddress("Norwich, UK", geocoder, map);
  google.maps.event.addListener(map, 'center_changed', function() {
    var places = [];
    places[0] = {
      name: "Norwich"
    };
    var i = 0;
    // var markerHTML = '{0}<br>{1}'.format(places[i].name, '1hour');
    var markerHTML = 'Norwich<br>1hour';
    var marker = new MarkerWithLabel({
      position: map.getCenter(),
      draggable: false,
      raiseOnDrag: true,
      map: map,
      labelContent: markerHTML,
      labelAnchor: new google.maps.Point(-10, 15),
      labelClass: "labels", // the CSS class for the label
      labelStyle: {
        opacity: 1.0
      },
      icon: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png"
    });
  });
}

function geocodeAddress(address, geocoder, resultsMap) {
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      resultsMap.fitBounds(results[0].geometry.viewport);

    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
.labels {
  font-family: "Lucida Grande", "Arial", sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-align: left;
  width: 100px;
  white-space: normal;
  word-spacing: 9999999px;
  display: inline;
  margin: 5%;
  color: #000000;
  filter: alpha(opacity=1);
}

＆＃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"></div>

＆＃13;

Html css在图像的右侧对齐

1 个答案: