Google地图：在标记点击侦听器中获取点击或标记（x，y）像素坐标 [英] Google Maps: Get click or marker (x,y) pixel coordinates inside marker click listener
本文介绍了Google地图：在标记点击侦听器中获取点击或标记（x，y）像素坐标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在标记点击上通过地图标记完全显示 自定义信息窗口。我已成功实施此答案以获得div显示在地图 - 画布上单击...但我无法在点击标记上进行复制。
是否有可能将标记像素位置置于标记点击函数内部，并且阻止正常的infowindow显示所需的自定义infowindow？
我试过这个：
google.maps.event.addListener（marker，'click'，函数（args）{
var x = args.pixel.x + $（'＃map'）。offset（）。left; //我们点击这里
var y = args.pixel.y;
info.style.left = x +'px';
info.style.top = y +'px';
info.style.display ='block';
}）;
但在控制台中，我看到：
Uncaught TypeError：无法读取属性'x'的未定义
解决方案
MouseClickEvent唯一记录的属性为：
$ b blockquote>
latLng LatLng事件发生时低于光标的经度/纬度。
要将其转换为像素位置，请使用 MapCanvasProjection ：
google.maps。 event.ad dListener（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';
}）;
程式码片段：
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 =（ ';'）;'p.x'; 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'，functi （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％;宽度：100％; margin：0px; padding：0px} div.info {position：absolute; z-index：999;宽度：200px; height：50px;显示：无; background-color：#fff; border：3px solid #ebebeb; padding：10px;}
< script src =https ：//maps.googleapis.com/maps/api/js>< / script>< div id =map_canvasstyle =border：2px solid＃3872ac;>< / div>< div id =myinfoclass =info> < p>< / div>< / code>< / pre>
I am trying to display completely custom info windows over map markers on marker click. I have successfully implemented this answer to get a div to show over a map-canvas click... but I am not able to replicate it on a marker click.
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
解决方案
A marker click event returns a MouseClickEvent
The only documented property of a MouseClickEvent is:
latLng LatLng The latitude/longitude that was below the cursor when the event occurred.
To convert that into a pixel position use the fromLatLngToContainerPixel method of 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>
这篇关于Google地图：在标记点击侦听器中获取点击或标记（x，y）像素坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
