Вопрос по javascript – Как отобразить ярлык рядом с маркером для Google Maps?
Я хотел бы отобразить текстовую метку рядом с маркерами на картах Google. Я уже пользовался Virtual Earth, и я только начинаю использовать Карты Google. Я попытался установить свойство Title, но это только меняет текст при наведении.
Есть ли способ отобразить небольшую строку текста под маркером, который будет оставаться там, когда пользователь увеличивает, панорамирует и использует карту?
Заранее спасибо!
Во, хотя вам придется добавить его рядом с маркерами.
то вы можете расширить маркер карт Google, чтобы добавить метод установки для метки, и вы можете определить объект метки, расширив оверлей Google MapsПросмотреть вот так ..
Демо: JsFiddle
<script type="text/javascript">
var point = { lat: 22.5667, lng: 88.3667 };
var markerSize = { x: 22, y: 40 };
google.maps.Marker.prototype.setLabel = function(label){
this.label = new MarkerLabel({
map: this.map,
marker: this,
text: label
});
this.label.bindTo('position', this, 'position');
};
var MarkerLabel = function(options) {
this.setValues(options);
this.span = document.createElement('span');
this.span.className = 'map-marker-label';
};
MarkerLabel.prototype = $.extend(new google.maps.OverlayView(), {
onAdd: function() {
this.getPanes().overlayImage.appendChild(this.span);
var self = this;
this.listeners = [
google.maps.event.addListener(this, 'position_changed', function() { self.draw(); })];
},
draw: function() {
var text = String(this.get('text'));
var position = this.getProjection().fromLatLngToDivPixel(this.get('position'));
this.span.innerHTML = text;
this.span.style.left = (position.x - (markerSize.x / 2)) - (text.length * 3) + 10 + 'px';
this.span.style.top = (position.y - markerSize.y + 40) + 'px';
}
});
function initialize(){
var myLatLng = new google.maps.LatLng(point.lat, point.lng);
var gmap = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var myMarker = new google.maps.Marker({
map: gmap,
position: myLatLng,
label: 'Hello World!',
draggable: true
});
}
</script>
<style>
.map-marker-label{
position: absolute;
color: blue;
font-size: 16px;
font-weight: bold;
}
</style>
Это сработает.
marker.label.span.remove()
shana
этот ресурс, который, я думаю, является хорошим решением для этой проблемы и может быть полезным. Также можно найти похожее решениВо.
чка .png, который будет содержать ваш текст. Это звучит глупо, но вы можете использовать какой-то внешний сервис для этого (например,это).
Вы загружаете свою иконку и получаете взамен ссылку. Если вы добавите какой-либо текст в ссылки, URL-адрес вернет ваш значок с тем текстом, который отображается в нем.
Это специальный класс InfoBox. Вы можете увидеть ссылку на API по ссылке выше
Файл js можно включить отсюда:https: //github.com/printercu/google-maps-utility-library-v3-read-only/blob/master/infobox/src/infobox.j
Cheers