javascript 谷歌地图：在标记点击监听器内获取点击或标记（x，y）像素坐标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29176753/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps: Get click or marker (x,y) pixel coordinates inside marker click listener
提问by Abram
I am trying to display completelycustom info windows over map markers on marker click. I have successfully implemented this answerto get a div to show over a map-canvas click... but I am not able to replicate it on a marker click.
我试图在标记单击时在地图标记上显示完全自定义的信息窗口。我已经成功地实现了这个答案，让一个 div 在地图画布点击上显示......但我无法在标记点击时复制它。
Is it possible to get the markers pixel position inside of the marker click function, and suppress the normal infowindow to show the desired custom infowindow?
是否可以在标记单击功能内获取标记像素位置，并抑制正常信息窗口以显示所需的自定义信息窗口？
I tried this:
我试过这个：
google.maps.event.addListener(marker, 'click', function(args) {
var x=args.pixel.x+$('#map').offset().left; //we clicked here
var y=args.pixel.y;
info.style.left=x+'px';
info.style.top=y+'px';
info.style.display='block';
});
but in the console, I see:
但在控制台中，我看到：
Uncaught TypeError: Cannot read property 'x' of undefined
回答by geocodezip
A marker click eventreturns a MouseClickEvent
The only documented property of a MouseClickEvent is:
MouseClickEvent 唯一记录的属性是：
latLng LatLng The latitude/longitude that was below the cursor when the event occurred.
latLng LatLng 事件发生时光标下方的纬度/经度。
To convert that into a pixel position use the fromLatLngToContainerPixel method of MapCanvasProjection:
要转换为像素位置使用的fromLatLngToContainerPixel方法MapCanvasProjection：
google.maps.event.addListener(marker, 'click', function (e) {
var point = overlay.getProjection().fromLatLngToDivPixel(e.latLng);
info.style.left = point.x + 'px';
info.style.top = point.y + 'px';
info.style.display = 'block';
});
code snippet:
代码片段：
var geocoder;
var map;
var overlay;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
map: map,
draggable: true,
position: map.getCenter()
});
google.maps.event.addListener(map, 'projection_changed', function () {
overlay = new google.maps.OverlayView();
overlay.draw = function () {};
overlay.setMap(map);
var info = document.getElementById('myinfo');
google.maps.event.addListener(marker, 'click', function (e) {
var point = overlay.getProjection().fromLatLngToContainerPixel(e.latLng);
info.style.left = (point.x - 100)+ 'px';
info.style.top = (point.y) + 'px';
info.style.display = 'block';
});
google.maps.event.addListener(map, 'center_changed', function (e) {
var point = overlay.getProjection().fromLatLngToContainerPixel(marker.getPosition());
info.style.left = (point.x - 100)+ 'px';
info.style.top = (point.y) + 'px';
info.style.display = 'block';
});
google.maps.event.addListener(marker, 'drag', function (e) {
var point = overlay.getProjection().fromLatLngToContainerPixel(marker.getPosition());
info.style.left = (point.x - 100)+ 'px';
info.style.top = (point.y) + 'px';
info.style.display = 'block';
});
});
}
google.maps.event.addDomListener(window, "load", initialize);html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
div.info {
position: absolute;
z-index: 999;
width: 200px;
height: 50px;
display: none;
background-color: #fff;
border: 3px solid #ebebeb;
padding: 10px;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
<div id="myinfo" class="info">
<p>I am a div on top of a google map ..</p>
</div>回答by Mark Adler
Here is how you get the pixel location:
以下是获取像素位置的方法：
function getPixelLocation(currentLatLng) {
var scale = Math.pow(2, map.getZoom());
// The NorthWest corner of the current viewport corresponds
// to the upper left corner of the map.
// The script translates the coordinates of the map's center point
// to screen coordinates. Then it subtracts the coordinates of the
// coordinates of the map's upper left corner to translate the
// currentLatLng location into pixel values in the <div> element that hosts the map.
var nw = new google.maps.LatLng(
map.getBounds().getNorthEast().lat(),
map.getBounds().getSouthWest().lng()
);
// Convert the nw location from geo-coordinates to screen coordinates
var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
// Convert the location that was clicked to screen coordinates also
var worldCoordinate = map.getProjection().fromLatLngToPoint(currentLatLng);
var currentLocation = new google.maps.Point(
Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
);
console.log(currentLocation);
return currentLocation;
}
回答by geocodezip
Another option. Use the InfoBox third party library. It inherits from OverlayView, and you can put your "completely custom" div in it.
另外一个选择。使用InfoBox 第三方库。它继承自 OverlayView，您可以将“完全自定义”的 div 放入其中。
var geocoder;
var map;
var overlay;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
map: map,
draggable: true,
position: map.getCenter()
});
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: white; padding: 5px;";
boxText.innerHTML = "I am a div on top of a google map ..";
var myOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-75, -10),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 0.75,
width: "150px"
},
closeBoxMargin: "0px 0px 0px 0px",
closeBoxURL: "",
infoBoxClearance: new google.maps.Size(0, 0),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
var info = new InfoBox(myOptions);
info.open(map, marker);
google.maps.event.addListener(marker, 'click', function() {
// info.setContent('<div id="myinfo" class="info"><p>I am a div on top of a google map ..</p></div>');
info.open(map, marker);
});
}
google.maps.event.addDomListener(window, "load", initialize);html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
div.info {
position: absolute;
z-index: 999;
width: 200px;
height: 50px;
display: none;
background-color: #fff;
border: 3px solid #ebebeb;
padding: 10px;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>回答by Abram
With Radio's help I was able to solve this. Upvote him.
在 Radio 的帮助下，我能够解决这个问题。给他点赞。
<div id="myinfo" class="info"><p>I am a div on top of a google map .. </p></div>
<script>
info = document.getElementById('myinfo');
google.maps.event.addListener(marker, 'click', function() {
var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast());
var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest());
var scale = Math.pow(2, map.getZoom());
var worldPoint = map.getProjection().fromLatLngToPoint(this.getPosition());
var markerCoords = new google.maps.Point((worldPoint.x - bottomLeft.x) * scale, (worldPoint.y - topRight.y) * scale);
var x=markerCoords['x']+$('#map').offset().left; //offset needed if map not fullscreen
var y=markerCoords['y'];
info.style.left=x+'px';
info.style.top=y+'px';
info.style.display='block';
});
</script>
