Google Maps API v3'te özel metin yazmak mümkün mü?

Google Maps API v3'te, işaretleyicinin yanında özel metin yazmak mümkün mü? veya bunu yapmak için sadece bilgi penceresini kullanabilir miyim?Google Maps API v3'te özel metin yazmak mümkün mü?

kaynak

2010-10-17 user198003

bakmak mümkün değil ... tek yolu şeffaf InfoBox penceresi oluşturmak ve üzerine yazı yazmak gibi ... yanlış mıyım? – user198003

Google harita statik harita API'sinde işaretçiye özel metin (büyük ihtimalle bir kelime) ekleyebilir miyim ..? – Jay

Özel metni göstermek için özel bir yer paylaşımı oluşturmanız gerekir. Aşağıda resmi Google dokümanlarından uyarlanmış bir örnek verilmiştir. Ayrıca, daha fazla "şık" bilgi pencereleri

<html> 
 

 
<head> 
 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> 
 
    </script> 
 
    <script> 
 
    //adapded from this example http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays 
 
    //text overlays 
 
    function TxtOverlay(pos, txt, cls, map) { 
 

 
     // Now initialize all properties. 
 
     this.pos = pos; 
 
     this.txt_ = txt; 
 
     this.cls_ = cls; 
 
     this.map_ = map; 
 

 
     // We define a property to hold the image's 
 
     // div. We'll actually create this div 
 
     // upon receipt of the add() method so we'll 
 
     // leave it null for now. 
 
     this.div_ = null; 
 

 
     // Explicitly call setMap() on this overlay 
 
     this.setMap(map); 
 
    } 
 

 
    TxtOverlay.prototype = new google.maps.OverlayView(); 
 

 

 

 
    TxtOverlay.prototype.onAdd = function() { 
 

 
     // Note: an overlay's receipt of onAdd() indicates that 
 
     // the map's panes are now available for attaching 
 
     // the overlay to the map via the DOM. 
 

 
     // Create the DIV and set some basic attributes. 
 
     var div = document.createElement('DIV'); 
 
     div.className = this.cls_; 
 

 
     div.innerHTML = this.txt_; 
 

 
     // Set the overlay's div_ property to this DIV 
 
     this.div_ = div; 
 
     var overlayProjection = this.getProjection(); 
 
     var position = overlayProjection.fromLatLngToDivPixel(this.pos); 
 
     div.style.left = position.x + 'px'; 
 
     div.style.top = position.y + 'px'; 
 
     // We add an overlay to a map via one of the map's panes. 
 

 
     var panes = this.getPanes(); 
 
     panes.floatPane.appendChild(div); 
 
    } 
 
    TxtOverlay.prototype.draw = function() { 
 

 

 
     var overlayProjection = this.getProjection(); 
 

 
     // Retrieve the southwest and northeast coordinates of this overlay 
 
     // in latlngs and convert them to pixels coordinates. 
 
     // We'll use these coordinates to resize the DIV. 
 
     var position = overlayProjection.fromLatLngToDivPixel(this.pos); 
 

 

 
     var div = this.div_; 
 
     div.style.left = position.x + 'px'; 
 
     div.style.top = position.y + 'px'; 
 

 

 

 
     } 
 
     //Optional: helper methods for removing and toggling the text overlay. 
 
    TxtOverlay.prototype.onRemove = function() { 
 
     this.div_.parentNode.removeChild(this.div_); 
 
     this.div_ = null; 
 
    } 
 
    TxtOverlay.prototype.hide = function() { 
 
     if (this.div_) { 
 
     this.div_.style.visibility = "hidden"; 
 
     } 
 
    } 
 

 
    TxtOverlay.prototype.show = function() { 
 
     if (this.div_) { 
 
     this.div_.style.visibility = "visible"; 
 
     } 
 
    } 
 

 
    TxtOverlay.prototype.toggle = function() { 
 
     if (this.div_) { 
 
     if (this.div_.style.visibility == "hidden") { 
 
      this.show(); 
 
     } else { 
 
      this.hide(); 
 
     } 
 
     } 
 
    } 
 

 
    TxtOverlay.prototype.toggleDOM = function() { 
 
     if (this.getMap()) { 
 
     this.setMap(null); 
 
     } else { 
 
     this.setMap(this.map_); 
 
     } 
 
    } 
 

 

 

 

 
    var map; 
 

 
    function init() { 
 
     var latlng = new google.maps.LatLng(37.9069, -122.0792); 
 
     var myOptions = { 
 
     zoom: 4, 
 
     center: latlng, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
     }; 
 
     map = new google.maps.Map(document.getElementById("map"), myOptions); 
 

 
     var marker = new google.maps.Marker({ 
 
     position: latlng, 
 
     map: map, 
 
     title: "Hello World!" 
 
     }); 
 

 
     customTxt = "<div>Blah blah sdfsddddddddddddddd ddddddddddddddddddddd<ul><li>Blah 1<li>blah 2 </ul></div>" 
 
     txt = new TxtOverlay(latlng, customTxt, "customBox", map) 
 

 
    } 
 
    </script> 
 
    <style> 
 
    .customBox { 
 
     background: yellow; 
 
     border: 1px solid black; 
 
     position: absolute; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body onload="init()"> 
 
    <div id="map" style="width: 600px; height: 600px;"> 
 
    </div> 
 
</body> 
 

 
</html>

kaynak

2010-10-17 20:56:31 Michal

Bu harika. Kafamı çiziyorum ve Google'ın bunu neden varsayılan olarak eklemediğini merak ediyorum. –

Etiket metni boyutunu değiştirmenin bir yolu var mı? Stil bloğuna 'font-size: 30px' eklemek işe yaramıyor. –

Bir çekicilik gibi çalışır! Mükemmel cevap! –

farkla Metin Yerleşimi eklemenin en kolay yolu https://github.com/googlemaps/js-map-label

var mapLabel = new MapLabel({ 
    text: 'Test', 
    position: new google.maps.LatLng(50,50), 
    map: map, 
    fontSize: 20, 
    align: 'right' 
});

kaynak

2012-11-18 04:19:44

"Uncaught ReferenceError: MapLabel tanımlı değil" hatası alıyorsunuz, nasıl yardımcı program kütüphanesi ekliyorsunuz? – muffin

'' – Legionar

Ama siz Bunu kullanmak için http: // google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/src/maplabel.js ' – Legionar

den MapLabel sınıf kullanmaktır için this library kullanabilirsiniz Bu metin statiktir, bir işaretleyici ve bir görüntü kullanabilirsiniz:

var label = new google.maps.Marker({ 
    position: new google.maps.LatLng(50,50), 
    map: map, 
    icon: "/images/mytextasanimage.png" 
});

kaynak

2014-11-19 09:01:30 user4269131

Gerçekten, bu çalışır. Çok iyi ! – Zl3n

Google Maps API v3'te özel metin yazmak mümkün mü?

cevap

İlgili konular