구글 지도에 지명 등 정보 보이기
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에 전송할 수 있으며 스타일을 설정할 수 있습니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.