Javascript 使用重叠标记蜘蛛侠时获取地图标记的新位置
我有一张谷歌地图,上面有标记,用来散布重叠非常紧密的标记。我需要检索鼠标事件上标记的屏幕位置(在真实版本中,我制作的工具提示过于复杂,无法嵌入谷歌提供的默认设置)Javascript 使用重叠标记蜘蛛侠时获取地图标记的新位置,javascript,google-maps,oms,Javascript,Google Maps,Oms,我有一张谷歌地图,上面有标记,用来散布重叠非常紧密的标记。我需要检索鼠标事件上标记的屏幕位置(在真实版本中,我制作的工具提示过于复杂,无法嵌入谷歌提供的默认设置) 功能项目(latLng){ 变量TILE_SIZE=256; var siny=Math.sin(latLng.lat*Math.PI/180); siny=Math.min(Math.max(siny,-0.9999),0.9999); 返回新的google.maps.Point( 瓷砖尺寸*(0.5+latLng.lng/360)
功能项目(latLng){
变量TILE_SIZE=256;
var siny=Math.sin(latLng.lat*Math.PI/180);
siny=Math.min(Math.max(siny,-0.9999),0.9999);
返回新的google.maps.Point(
瓷砖尺寸*(0.5+latLng.lng/360),
瓷砖尺寸*(0.5-数学对数((1+siny)/(1-siny))/(4*数学PI));
}
函数getPixelPosition(标记、贴图){
var zoom=map.getZoom();
var scale=1问题在于函数getPixelPosition
。我们可以很容易地更改这一行
var loc=marker.data.location
,它将自定义静态数据属性集用于其他目的,并将其替换为
var loc={lat:marker.getPosition().lat(),lng:marker.getPosition().lng()}
,它获取标记的当前位置
所有的oms
在经过一堆计算后,都是使用gmaps自己的setPosition
方法更新google地图标记的位置,所以这一切都很好
function project(latLng) {
var TILE_SIZE = 256;
var siny = Math.sin(latLng.lat * Math.PI / 180);
siny = Math.min(Math.max(siny, -0.9999), 0.9999);
return new google.maps.Point(
TILE_SIZE * (0.5 + latLng.lng / 360),
TILE_SIZE * (0.5 - Math.log((1 + siny) / (1 - siny)) / (4 * Math.PI)));
}
function getPixelPosition(marker, map) {
var zoom = map.getZoom();
var scale = 1 << zoom;
var loc = marker.data.location;
var worldCoordinate = project(loc);
var pixelCoordinate = new google.maps.Point(
Math.floor(worldCoordinate.x * scale),
Math.floor(worldCoordinate.y * scale));
return pixelCoordinate;
}
function getMapTopLeftPosition(map) {
var zoom = map.getZoom();
var scale = 1 << zoom;
var topLeft = new google.maps.LatLng(
map.getBounds().getNorthEast().lat(),
map.getBounds().getSouthWest().lng());
var projection = map.getProjection();
var topLeftWorldCoordinate = projection.fromLatLngToPoint(topLeft);
var topLeftPixelCoordinate = new google.maps.Point(
topLeftWorldCoordinate.x * scale,
topLeftWorldCoordinate.y * scale);
return topLeftPixelCoordinate;
}
function getMarkerRelativePosition(marker, map) {
const screenPosition = getPixelPosition(marker, map);
const topLeftMapPosition = getMapTopLeftPosition(map);
const markerHeight = 60;
const markerWidth = 48;
return {
x: screenPosition.x - topLeftMapPosition.x - (markerWidth / 2),
y: screenPosition.y - topLeftMapPosition.y - markerHeight,
};
}
function showInfo(position, text) {
// triggered on marker mouseover
const mapContainer = document.getElementById('map-container');
const infoDiv = document.createElement('div');
infoDiv.innerHTML = text;
infoDiv.setAttribute('id', 'info')
infoDiv.style.left = position.x + 'px';
infoDiv.style.top = position.y + 'px';
mapContainer.appendChild(infoDiv);
}
function hideInfo() {
// triggered on marker mouseout
const info = document.getElementById('info')
info.remove();
}