5
Come posso visualizzare InfoWindow con la freccia sul lato sinistro come invece sul fondo?Google map in basso a destra posizione
A
risposta
4
Non è possibile farlo con un codice nativo google.maps.InfoWindow. È possibile utilizzare una delle sostituzioni di InfoWindow di terze parti e personalizzarle per avere la freccia sul lato sinistro.
proof of concept fiddle (usando InfoBox)
frammento di codice:
function initialize() {
\t \t var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);
\t \t var myMapOptions = {
\t \t \t zoom: 15
\t \t \t ,center: secheltLoc
\t \t \t ,mapTypeId: google.maps.MapTypeId.ROADMAP
\t \t };
\t \t var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
\t \t var marker = new google.maps.Marker({
\t \t \t map: theMap,
\t \t \t draggable: true,
\t \t \t position: new google.maps.LatLng(49.47216, -123.76307),
\t \t \t visible: true
\t \t });
\t \t var boxText = document.createElement("div");
\t \t boxText.style.cssText = "border: 1px solid black; margin-top: 0px; margin-left: 6px; background: yellow; padding: 5px;";
\t \t boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";
\t \t var myOptions = {
\t \t \t content: boxText
\t \t \t ,disableAutoPan: false
\t \t \t ,maxWidth: 0
\t \t \t ,pixelOffset: new google.maps.Size(10, -50)
\t \t \t ,zIndex: null
\t \t \t ,boxStyle: {
\t \t \t background: "url('http://www.geocodezip.com/images/tipbox90pad.gif') no-repeat"
\t \t \t ,opacity: 0.75
\t \t \t ,width: "150px"
\t \t \t }
\t \t \t ,closeBoxMargin: "10px 2px 2px 2px"
\t \t \t ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
\t \t \t ,infoBoxClearance: new google.maps.Size(1, 1)
\t \t \t ,isHidden: false
\t \t \t ,pane: "floatPane"
\t \t \t ,enableEventPropagation: false
\t \t };
\t \t google.maps.event.addListener(marker, "click", function (e) {
\t \t \t ib.open(theMap, this);
\t \t });
\t \t var ib = new InfoBox(myOptions);
\t \t ib.open(theMap, marker);
\t }
google.maps.event.addDomListener(window, "load", initialize);html, body, #map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map_canvas"></div>
0
C'è una proprietà chiamata AnchorPoint con cui è possibile cambiare la posizione della finestra informazioni.
1
Sulla base di questa Can a Google maps infoWindow be on right or left side a marker? discussione, si può utilizzare la proprietà pixelOffset di infowindow che accetta un valore google.maps.Size.
L'offset, in pixel, della punta della finestra informativa dal punto sulla mappa alle cui coordinate geografiche è ancorata la finestra delle informazioni. Se un InfoWindow viene aperto con un'ancora, il pixelOffset verrà calcolato dalla proprietà anchorPoint dell'ancora.
Ad esempio:
var infowindow = new google.maps.InfoWindow({
content: "hello world",
pixelOffset: new google.maps.Size(100,100)
});
È possibile controllare su questi fili correlati:
- Google Maps InfoBubble pixelOffset (Moving from default position above marker)
- Esempio da GitHub: https://gist.github.com/carloscabo/cca62ae31a0d42438873
Spero che questo aiuti!
1
E 'passato un po' di tempo, e probabilmente si sposta il vostro interesse su questo argomento. Ma vorrei dire che è possibile senza l'uso di strumenti di terze parti ... basta aggiungere pixelOffset al infowindow in questo modo:
var infowindow = new google.maps.InfoWindow({
content: "My custom info window",
pixelOffset: new google.maps.Size(250, 150)
});
Inoltre, si può farebbe ruotare la freccia pure, basta aggiungere quelli stile linee:
#map div div div:last-child div:last-child div div div:nth-child(3) {
left: 0 !important;
top: 30px !important;
border-top-width: 24px;
position: absolute;
transform: rotate(90deg);
}
aiuti voi o aiutare qualcun altro ...
applausi.