Google maps v3 ломаная подсказка

Question

Объект маркера карт Google (google.maps.Marker) имеет свойство title, поэтому, когда пользователь наводит курсор мыши на маркер, отображается простая подсказка.

На полилинии нет свойства заголовка (google.maps.Polyline). Есть ли способ, которым я могу сделать это / смоделировать это в V3? Я мог бы сделать это в V2 , и я не могу найти пример для V3.

Answer 1

Я объединил ответ @ samshull выше (должным образом проголосовал!) С информацией из здесь , чтобы InfoWindow появилось там, где курсор мыши наведен на строку:

// Open the InfoWindow on mouseover:
google.maps.event.addListener(line, 'mouseover', function(e) {
   infoWindow.setPosition(e.latLng);
   infoWindow.setContent("You are at " + e.latLng);
   infoWindow.open(map);
});

// Close the InfoWindow on mouseout:
google.maps.event.addListener(line, 'mouseout', function() {
   infoWindow.close();
});

Здесь line - ваш PolyLine объект; map ваш Карта объект; infoWindow - это ваш объект InfoWindow, который я только что создал:

var infoWindow = new google.maps.InfoWindow();

Я также следую этому совету , повторно используя один и тот же объект InfoWindow для всех моих полилиний вместо создания нового для каждой строки:

Лучшие практики: для лучшего пользовательского опыта, только одно информационное окно должен быть открыт на карте в любое время. Несколько информационных окон делают карта кажется загроможденной. Если вам нужно только одно информационное окно одновременно, Вы можете создать только один объект InfoWindow и открыть его на разных местоположения или маркеры на событиях карты, таких как щелчки пользователя. Если вы делаете нужно более одного информационного окна, вы можете отобразить несколько InfoWindow объекты одновременно.

Обратите внимание, что infoWindow.setContent() принимает строку. Поэтому вызовите toString() для числовой переменной, если вы хотите отобразить число в информационном окне.

Я рассматриваю все это как несовершенный обходной путь до тех пор, пока Google Карты, надеюсь, однажды не добавят свойство title к PolylineOptions , как они уже сделали для MarkerOptions .

Answer 2

Я не на 100%, это единственный или лучший способ, но это способ создать окно поверх вашей полилинии

В Google maps V3 вам следуетчтобы создать InfoWindow , затем установить содержимое, используя myInfoWindow.setContent("Hello World!")

. Чтобы оно отображалось при наведении курсора, вам нужно будет сделать что-то вроде:

google.maps.event.addListener(myPolyline, 'mouseover', function() {
    myInfoWindow.open(mymap);
    // mymap represents the map you created using google.maps.Map
});

// assuming you want the InfoWindow to close on mouseout
google.maps.event.addListener(myPolyline, 'mouseout', function() {
    myInfoWindow.close();
});

Answer 3

Я нашел это в Интернете, которое помогло мне создавать всплывающие подсказки для полигонов, начиная с http://philmap.000space.com/gmap-api/poly-hov.html:

var tooltip=function(){
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 200;
var speed = 10;
var timer = 20;
var endalpha = 95;
var alpha = 0;
var tt,t,c,b,h;
var ie = document.all ? true : false;
return{
    show:function(v,w){         
        if(tt == null){             
            tt = document.createElement('div');
            tt.setAttribute('id',id);
            t = document.createElement('div');
            t.setAttribute('id',id + 'top');
            c = document.createElement('div');
            c.setAttribute('id',id + 'cont');
            b = document.createElement('div');
            b.setAttribute('id',id + 'bot');
            tt.appendChild(t);
            tt.appendChild(c);
            tt.appendChild(b);
            document.body.appendChild(tt);              
            tt.style.opacity = 0;
            tt.style.filter = 'alpha(opacity=0)';
            document.onmousemove = this.pos;                
        }
        tt.style.visibility = 'visible';
        tt.style.display = 'block';
        c.innerHTML = v;
        tt.style.width = w ? w + 'px' : 'auto';
        if(!w && ie){
            t.style.display = 'none';
            b.style.display = 'none';
            tt.style.width = tt.offsetWidth;
            t.style.display = 'block';
            b.style.display = 'block';
        }
        if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
        h = parseInt(tt.offsetHeight) + top;
        clearInterval(tt.timer);
        tt.timer = setInterval(function(){tooltip.fade(1)},timer);
    },
    pos:function(e){
        var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
        var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
        tt.style.top = (u - h) + 'px';
        tt.style.left = (l + left) + 'px';
    },
    fade:function(d){
        var a = alpha;
        if((a != endalpha && d == 1) || (a != 0 && d == -1)){
            var i = speed;
            if(endalpha - a < speed && d == 1){
                i = endalpha - a;
            }else if(alpha < speed && d == -1){
                i = a;
            }
            alpha = a + (i * d);
            tt.style.opacity = alpha * .01;
            tt.style.filter = 'alpha(opacity=' + alpha + ')';
        }else{
            clearInterval(tt.timer);
            if(d == -1){tt.style.display = 'none'}
        }
    },
    hide:function(){
        clearInterval(tt.timer);
        tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
    }
};
}();

Также, пожалуйста, смотрите это ТАКОЕ обсуждение на ту же тему: Подсказка над полигоном в Google Maps И, Google карты прямоугольник / многоугольник с заголовком

Answer 4

Если я не ошибаюсь, я не думаю, что можно установить всплывающую подсказку, поскольку, как вы упоминали, в объекте PolygonOptions нет свойства title. Но вы можете создать div , который выглядит точно так же, как всплывающая подсказка и поместите ее, скажем, в кончик вашей мыши во время события mousemove . Я также пытался найти решение, чтобы поместить эту подсказку где-нибудь в центре многоугольника, но я думаю, что это слишком много проблем, поэтому я также думаю, что ребята из Google не реализовали это тоже. Приветствия