Có thể viết văn bản tùy chỉnh trên API Google Maps v3 không?

Có thể viết văn bản tùy chỉnh trên API Google Maps v3, bên cạnh điểm đánh dấu không? hoặc tôi chỉ có thể sử dụng cửa sổ thông tin để làm điều đó?Có thể viết văn bản tùy chỉnh trên API Google Maps v3 không?

Nguồn

2010-10-17 user198003

nhìn của nó là không thể ... như cách duy nhất là tạo ra cửa sổ InfoBox minh bạch và viết văn bản trên đó ... cho tôi biết nếu tôi sai? – user198003

Tôi có thể thêm văn bản tùy chỉnh (một từ có thể nhất) vào điểm đánh dấu trong bản đồ tĩnh API bản đồ tĩnh .. không? – Jay

Để hiển thị văn bản tùy chỉnh, bạn cần phải tạo lớp phủ tùy chỉnh. Dưới đây là ví dụ được điều chỉnh từ tài liệu chính thức của Google. Bạn cũng có thể sử dụng this library để biết thêm "phong cách" thông tin cửa sổ

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

Nguồn

2010-10-17 20:56:31 Michal

Điều này thật tuyệt vời. Tôi gãi đầu, tự hỏi tại sao Google không bao gồm điều này theo mặc định. –

Có cách nào để thay đổi cỡ chữ của nhãn không? Việc thêm 'font-size: 30px' vào khối kiểu dường như không hoạt động. –

Hoạt động như một sự quyến rũ! Câu trả lời tuyệt vời! –

By xa cách dễ nhất để thêm một lớp phủ Văn bản được phát để sử dụng lớp MapLabel từ 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' 
});

Nguồn

2012-11-18 04:19:44

Tôi gặp lỗi "Uncaught ReferenceError: MapLabel không được định nghĩa", bạn thêm thư viện tiện ích như thế nào? – muffin

'' – Legionar

Nhưng bạn cần phải sử dụng URL này: http: // google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/src/maplabel.js' – Legionar

Văn bản tĩnh, bạn có thể sử dụng điểm đánh dấu và hình ảnh:

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

Nguồn

2014-11-19 09:01:30 user4269131

Thật vậy, tính năng này hoạt động. Rất tốt ! – Zl3n

Có thể viết văn bản tùy chỉnh trên API Google Maps v3 không?

Trả lời

Các vấn đề liên quan