谷歌地图infowindow位置在右侧

Question

如何在左侧显示带有箭头的InfoWindow，而不是在底部？

screenshot example here

Answer 1

现在已经有一段时间了，可能你确实对这个话题感兴趣了。但我想说可以不使用任何第三方工具......只需将pixelOffset添加到infowindow，就像这样：

var infowindow = new google.maps.InfoWindow({
      content: "My custom info window",
      pixelOffset: new google.maps.Size(250, 150)
  });

此外，您也可以旋转箭头，只需添加这些样式线：

#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);
}

可以帮助你或帮助别人......

欢呼声。

Answer 2

您无法使用原生google.maps.InfoWindow进行此操作。您可以使用第三方InfoWindow替换之一并自定义它们以使箭头位于左侧。

proof of concept fiddle（使用InfoBox）

代码段

function initialize() {
		var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);

		var myMapOptions = {
			 zoom: 15
			,center: secheltLoc
			,mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);


		var marker = new google.maps.Marker({
			map: theMap,
			draggable: true,
			position: new google.maps.LatLng(49.47216, -123.76307),
			visible: true
		});

		var boxText = document.createElement("div");
		boxText.style.cssText = "border: 1px solid black; margin-top: 0px; margin-left: 6px; background: yellow; padding: 5px;";
		boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

		var myOptions = {
			 content: boxText
			,disableAutoPan: false
			,maxWidth: 0
			,pixelOffset: new google.maps.Size(10, -50)
			,zIndex: null
			,boxStyle: { 
			  background: "url('http://www.geocodezip.com/images/tipbox90pad.gif') no-repeat"
			  ,opacity: 0.75
			  ,width: "150px"
			 }
			,closeBoxMargin: "10px 2px 2px 2px"
			,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
			,infoBoxClearance: new google.maps.Size(1, 1)
			,isHidden: false
			,pane: "floatPane"
			,enableEventPropagation: false
		};

		google.maps.event.addListener(marker, "click", function (e) {
			ib.open(theMap, this);
		});

		var ib = new InfoBox(myOptions);

		ib.open(theMap, marker);
	}
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>

Answer 3

根据此Can a Google maps infoWindow be on right or left side a marker?主题，您可以使用接受google.maps.Size作为值的infowindow的pixelOffset属性。

  

信息窗口的尖端与地图上信息窗口锚定的地理坐标处的点的偏移量（以像素为单位）。如果使用锚点打开InfoWindow，则将从锚点 anchorPoint 属性计算pixelOffset。

例如：

var infowindow = new google.maps.InfoWindow({
      content: "hello world",
      pixelOffset: new google.maps.Size(100,100)
  });

您可以查看这些相关主题：

• Google Maps InfoBubble pixelOffset (Moving from default position above marker)
• 来自GitHub的示例：https://gist.github.com/carloscabo/cca62ae31a0d42438873

希望这有帮助！

Answer 4

有一个名为anchorPoint的属性，您可以通过该属性更改信息窗口的位置。