谷歌地图:获取点击或标记(x，y）像素坐标内的标记点击侦听器
Google Maps: Get click or marker (x,y) pixel coordinates inside marker click listener
我正试图在标记点击上的地图标记上完全显示自定义信息窗口。我已经成功地实现了这个答案，让div显示在地图画布上点击。。。但我无法在点击标记时复制它。
是否可以在标记点击功能中获取标记的像素位置，并抑制正常的信息窗口以显示所需的自定义信息窗口？
我试过这个：
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';
});
但在控制台中，我看到：
Uncaught TypeError: Cannot read property 'x' of undefined
标记点击事件返回鼠标点击事件
MouseClickEvent的唯一记录属性是：
latLng latLng事件发生时位于光标下方的纬度/经度。
要将其转换为像素位置，请使用MapCanvasProjection:的fromLatLngToContainerPixel方法
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';
});
工作小提琴
代码片段：
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>以下是获取像素位置的方法：
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;
}
另一个选项。使用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>在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>
相关文章：
- 点击(右键点击）使用传单地图库获取图像覆盖的像素坐标
- 谷歌地图:获取点击或标记(x，y）像素坐标内的标记点击侦听器
- 从FF和谷歌浏览器的像素坐标中选择
- 如何在传单中投影像素坐标
- 如何将像素坐标转换为等轴测网格坐标
- 开放层 - 像素坐标不正确
- 将纬度/纬度转换为像素坐标
- Pixi.js / WebGL方法，用于将数据模型坐标转换为画布像素坐标
- 获取基于百分比或基于像素的x&y坐标来自latlng
- 找出图像中文本块的像素坐标
- 从坐标中获取像素
- 将lat/lng坐标转换为给定地图上的像素(使用JavaScript）
- 使用滚动条后的画布像素坐标偏移量
- 计算坐标区域的黑色像素
- 将纬度/长度转换为像素X&Y坐标
- 使用Javascript查找网页上特定坐标的像素颜色
- 图像像素X、Y坐标为经纬度
- Google Maps API v3 -- 如何将 .getBounds(） 转换为像素坐标
- HTML 5画布坐标和浏览器像素的相关性
- 获取矩形元素的屏幕像素坐标
