구글 지도에 지명 등 정보 보이기

2344 단어 jsmapGoogleinfowindow
function Tooltip(options) { 
    this.marker_ = options.marker;
    this.content_ = options.content;
    this.map_ = options.marker.get('map');
    this.cssClass_ = options.cssClass || null; 
    this.is_hidden = options.is_hidden === undefined ? !0 : options.is_hidden; 
    this.div_ = null; 
    this.setMap(this.map_);
    var me = this; 
    if(this.is_hidden){
        google.maps.event.addDomListener(me.marker_, 'mouseover', function(){
            me.show();
        });
        google.maps.event.addDomListener(me.marker_, 'mouseout', function(){
            me.hide();
        });
    }
} 
Tooltip.prototype = new google.maps.OverlayView(); 
Tooltip.prototype.onAdd = function() { 
    var div = document.createElement('DIV');
    div.style.position = "absolute"; 
    div.style.visibility = "visible"; 
    if(this.is_hidden) 
        div.style.visibility = "hidden";
    else 
        div.style.visibility = "visible"; 
    div.innerHTML = this.content_; 
    this.div_ = div; 
    var panes = this.getPanes();
    panes.floatPane.appendChild(this.div_);
    var me = this; 
    google.maps.event.addDomListener(this.div_, 'click', function(){ 
        if(me.map_.getZoom() < 18){
            me.map_.setZoom(me.map_.getZoom() + 1);
            me.map_.setCenter(me.marker_.getPosition()); 
        }
    });
} 
Tooltip.prototype.draw = function() { 
    var overlayProjection = this.getProjection(); 
    var ne = overlayProjection.fromLatLngToDivPixel(this.marker_.getPosition());
    var div = this.div_;
    div.style.left = ne.x + 'px';
    div.style.top = ne.y + 'px';
} 
Tooltip.prototype.onRemove = function() {
    this.div_.parentNode.removeChild(this.div_);
} 
Tooltip.prototype.hide = function() {
    if (this.div_) {
        this.div_.style.visibility = "hidden";
    }
}
Tooltip.prototype.show = function() {
    if (this.div_) {
        this.div_.style.visibility = "visible";
    }
}

마커에 표시된 알림 정보는 infowindow를 사용했지만 infowindow는 너무 못생겼고 위치가 항상 위에 있어서 이 코드를 찾았습니다.
이것은 다른 사람이 쓴 코드인데, 나는 두 군데를 고쳤다.
일.모든 알림 정보가 숨겨진 것이 아니라 일부는 계속 표시되어 있다. 예를 들어 중점적인 역, 도시, 일부는 마우스를 올려놓고 표시된다.
2. 어떤 점을 클릭할 때 지도를 확대하고 지도의 중심에 놓는다.
콘텐츠에 html 코드, cssClass에 전송할 수 있으며 스타일을 설정할 수 있습니다.

좋은 웹페이지 즐겨찾기