Я хотел бы отобразить текстовую метку рядом с маркерами на картах google. Я использовал Virtual Earth раньше, и я только начинаю использовать Карты Google. Я попытался установить свойство Title, но это изменит только перелистывание текста.
Есть ли способ отобразить небольшую строку текста под маркером, который останется там, когда пользователь будет масштабировать, скопировать и использовать карту?
Спасибо заранее!
Здесь есть класс ярлыков , хотя вам придется добавить его вместе с маркерами.
В Google Maps JavaScript API v3 просмотрите примеры здесь.
Исходный код доступен в обычных и сведенных к минимуму формах.
Если вы хотите показать ярлык ниже маркера, вы можете расширить маркеры Google Marker, чтобы добавить метод setter для метки, и вы можете определить объект метки, расширив наложения 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>
Это будет работать.
Вот пример кода, который бы разрешил проблему: https://github.com/printercu/google-maps-utility-library-v3-read-only/tree/master/markerwithlabel/examples
Это пользовательский класс, называемый InfoBox. Вы можете увидеть ссылку API по ссылке выше
Файл js можно включить здесь: https://github.com/printercu/google-maps-utility-library-v3-read-only/blob/master/infobox/src/infobox.js
Ура!
Даже этот вопрос был дан ответ Я нашел этот ресурс, который, я думаю, является хорошим решением для этой проблемы и может быть полезным. Кроме того, аналогичное решение можно найти здесь.
Альтернативой использованию библиотеки js является просто создать значок .png, который будет содержать ваш текст. Это звучит глупо, но для этого вы можете использовать некоторые внешние сервисы (например, этот).
Вы загружаете свой значок и получаете ссылку в ответ. Если вы добавите какой-то текст в ссылку url - он вернет вашу иконку с текстом, представленным в нее.