Zeigt Text über die Region in Google Geocharts an

9

Wie kann ich Text über die Regionen anzeigen? Momentan wird nur die ausgewählte Region angezeigt und wenn die Maus darüber bewegt wird, wird der Text angezeigt. Ich muss sowohl Text als auch Region anzeigen. Überprüfe diese Geige Ссылка

%Vor%     
Manu Singh 14.10.2014, 17:47
quelle

1 Antwort

1

Es ist durchaus möglich, obwohl dies etwas mühsam ist, dies mit zwei Aufrufen der API zu tun. Möglicherweise gibt es eine Möglichkeit, dies weiter zu vereinfachen, aber dies funktioniert definitiv in Chrome (nicht mit anderen Browsern getestet):

  1. Verwende 2 divs, um die Karten zu halten. Verwenden Sie identische absolute Positionen und Größen für beide. Der erste wird versteckt, und der zweite wird einen höheren Z-Index haben (zB 10), so dass er über dem ersten liegt (ich bin mir nicht sicher, dass 2 Divs absolut notwendig sind, aber ich habe mir nicht die Zeit genommen, es zu versuchen mit nur 1).

  2. Erstellen Sie eine Karte mit displayMode von 'text' (nennen wir es "textmap"). Laden Sie die Karte in das erste div. Hinweis: Diese Karte benötigt eine andere Datentabelleneingabe als Ihre "echte" (farbige) Karte.

  3. Fügen Sie Ihrer Textkarte einen Listener hinzu, wenn Sie bereit sind. Im Listener-Callback durchlaufen Sie document.getElementsByTagName ('text') und speichern für jedes Element in der Liste seine innerHTML (oder textContent) und Positionsinformationen (aus getBoundingClientRect ()) in einem Array (nennen Sie dies die "label data Array "). Nachdem Sie fertig sind, können Sie Ihre Textkarte zerstören, wenn Sie wollen (ich könnte mir vorstellen, dass Sie auch das versteckte div zerstören können) - stellen Sie sicher, dass Sie das Etikettendaten-Array speichern.

  4. Die letzten Schritte im Textmap-Listener bestehen darin, die farbige Karte anzuzeigen und die Datenbeschriftungen hinzuzufügen (ich weiß nicht warum, aber das Hinzufügen der Beschriftungen scheint nicht zu funktionieren. Vielleicht wenn die Karte erstellt wird Es nimmt automatisch einen höheren z-Index als alles andere auf der Seite). Zeichnen Sie also Ihre "echte" Karte (die farbige Karte) mit map.draw (), fügen Sie dann einen Listener zu dieser Karte hinzu und durchlaufen Sie in ihrem Callback die gespeicherten Datenbeschriftungen und fügen Sie jedes Etikett als neues div hinzu (mit absolute Position basierend auf den gespeicherten Positionsdaten) ein höherer Z-Index als alles andere auf der Seite (zB 20).

mwag 10.05.2016 15:52
quelle

Tags und Links