google map v 3カスタムマーカーを使って地図にテキストラベルを追加します.
4866 ワード
インターネットで長い間探しましたが、v 2バージョンですので、アプリを見てみられませんか?上にはカスタム重畳層しかありません.マーカーを書き換える機能はありません. 仕方がないです.アプリのカスタム重畳を使いましょう.字付きの表記が可能ですが、マーカーほど多くの機能がありません.
あなたのjavascriptは引き続き機能を充填できます. 使う時はこの言葉を使います.
あなたのjavascriptは引き続き機能を充填できます. 使う時はこの言葉を使います.
overlay = new MyMarker(map,{latlng:new google.maps.LatLng(0, -180),image:"googlemap/images/alarm.gif",clickFun:zoomOut});
/*************** , ******************/
function MyMarker(map, options) {
// Now initialize all properties.
this.latlng = options.latlng; //
this.image_ = options.image; //
this.labelText = options.labelText || ' ';
this.labelClass = options.labelClass || 'shadow';//
this.clickFun = options.clickFun ;//
// this.labelOffset = options.labelOffset || new google.maps.Size(8, -33);
this.map_ = map;
this.div_ = null;
// Explicitly call setMap() on this overlay
this.setMap(map);
}
MyMarker.prototype = new google.maps.OverlayView();
//
MyMarker.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
div.style.border = "none";
div.style.borderWidth = "0px";
div.style.position = "absolute";
div.style.cursor = "hand";
div.onclick = this.clickFun ||function(){};// click ,
// Create an IMG element and attach it to the DIV.
var img = document.createElement("img"); //
img.src = this.image_;
img.style.width = "100%";
img.style.height = "100%";
//
var label = document.createElement('div');//
label.className = this.labelClass;
label.innerHTML = this.labelText;
label.style.position = 'absolute';
label.style.width = '200px';
// label.style.fontWeight = "bold";
label.style.textAlign = 'left';
label.style.padding = "2px";
label.style.fontSize = "10px";
// label.style.fontFamily = "Courier New";
div.appendChild(img);
div.appendChild(label);
this.div_ = div;
// We add an overlay to a map via one of the map's panes.
// We'll add this overlay to the overlayImage pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
}
// ,
MyMarker.prototype.draw = function() {
// Size and position the overlay. We use a southwest and northeast
// position of the overlay to peg it to the correct position and size.
// We need to retrieve the projection from this overlay to do this.
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.latlng); //
// var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's DIV to fit the indicated dimensions.
var div = this.div_;
div.style.left =position.x-5 + 'px';
div.style.top =position.y-5 + 'px';
//
div.style.width = '10px';
div.style.height ='10px';
}
MyMarker.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
//Note that the visibility property must be a string enclosed in quotes
MyMarker.prototype.hide = function() {
if (this.div_) {
this.div_.style.visibility = "hidden";
}
}
MyMarker.prototype.show = function() {
if (this.div_) {
this.div_.style.visibility = "visible";
}
}
//
MyMarker.prototype.toggle = function() {
if (this.div_) {
if (this.div_.style.visibility == "hidden") {
this.show();
} else {
this.hide();
}
}
}