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事件发生时低于光标的经度/纬度。

要将其转换为像素位置，请使用：

  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:

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

working fiddle

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）像素坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！