Html css在圖像右側對齊

我試圖在google地圖上顯示帶有標籤的標記。我正在使用markerwithlabel.js庫，它允許我實現這一點。基本上我可以提交一些HTML + CSS作爲標記標籤，它會顯示在地圖上。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); 

}

來源

2015-10-01 Wild Goat

這'width'財產可能是問題。嘗試刪除它或將其設置得更寬。 – jmargolisvt

請提供一個[最小，完整，測試和可讀示例]（http://stackoverflow.com/help/mcve）來說明問題。 – geocodezip

更改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

代碼片段：

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);

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

<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>

來源

2015-10-01 21:23:06 geocodezip

令人難以置信。謝謝！ –

Html css在圖像右側對齊

回答

相關問題