jjzjj

javascript - Google Maps : Get click or marker (x, y) 标记点击监听器内的像素坐标

coder 2025-01-27 原文

我正在尝试在点击标记 时在 map 标记上完全 显示自定义信息窗口。我已经成功实现了this answer让 div 显示在 map Canvas 上单击...但我无法在标记单击时复制它。

是否有可能在标记点击功能中获取标记像素位置，并抑制普通信息窗口以显示所需的自定义信息窗口？

我试过这个:

      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

最佳答案

A marker click event返回 MouseClickEvent

唯一记录在案的 MouseClickEvent 属性是:

latLng LatLng The latitude/longitude that was below the cursor when the event occurred.

要将其转换为像素位置，请使用 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';
    });

working fiddle

代码片段:

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>

关于javascript - Google Maps : Get click or marker (x, y) 标记点击监听器内的像素坐标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29176753/

监听器javascript39stylegooglejquerygoogle-mapsgoogle-maps-api-3

有关javascript - Google Maps : Get click or marker (x, y) 标记点击监听器内的像素坐标的更多相关文章

  1. ruby-on-rails - 如何在 Rails Controller Action 上触发 Facebook 像素 - 2

    我有一个ruby​​onrails应用程序。我按照facebook的说明添加了一个像素。但是，要跟踪转化，Facebook要求您将页面置于达到预期结果时出现的转化中。即，如果我想显示客户已注册，我会将您注册后转到的页面作为成功对象进行跟踪。我的问题是，当客户注册时，在我的应用程序中没有登陆页面。该应用程序将用户带回主页。它在主页上显示了一条消息，所以我想看看是否有一种方法可以跟踪来自Controller操作而不是实际页面的转化。我需要计数的Action没有页面，它们是ControllerAction。是否有任何人都知道的关于如何执行此操作的gem、文档或最佳实践？这是进入布局文件的像素

  2. ruby-on-rails - 从应用程序中自定义文件夹内的命名空间自动加载 - 2

    我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中，我们希望成为我们的rails应用程序中的一等公民的几个类类型起源，这意味着它们应该驻留在应用程序的app文件夹下，它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来，我有点担心应用程序文件夹被这么多目录污染。因此，我想将它们移动到一个子目录/模块中，该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内，目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. ruby - 如何在ruby中提取方括号内的内容 - 2

    我正在尝试提取方括号内的内容。到目前为止，我一直在使用它，它有效，但我想知道我是否可以直接在正则表达式中使用某些东西，而不是使用这个删除功能。a="Thisissuchagreatday[coolawesome]"a[/\[.*?\]/].delete('[]')#=>"coolawesome" 最佳答案 差不多。a="Thisissuchagreatday[coolawesome]"a[/\[(.*?)\]/,1]#=>"coolawesome"a[/(?"coolawesome"第一个依赖于提取组而不是完全匹配；第二个利用前瞻和

  5. ruby-on-rails - 使用 gmaps4rails 动态加载谷歌地图标记 - 2

    如何只加载map边界内的标记gmaps4rails？当然，在平移和/或缩放后加载新的。与此直接相关的是，如何获取map的当前边界和缩放级别？ 最佳答案 我是这样做的，我只在用户完成平移或缩放后替换标记，如果您需要不同的行为，请使用不同的事件监听器:在你看来(index.html.erb):{"zoom"=>15,"auto_adjust"=>false,"detect_location"=>true,"center_on_user"=>true}},false,true)%>在View的底部添加:functiongmaps4rail

  6. ruby - block 内的实例评估 - 2

    我有一个Builder类，可让您添加到其中一个实例变量:classBuilderdefinitialize@lines=[]enddeflinesblock_given??yield(self):@linesenddefadd_line(text)@lines现在，我该如何改变它my_builder=Builder.newmy_builder.lines{|b|b.add_line"foo"b.add_line"bar"}pmy_builder.lines#=>["foo","bar"]进入这个？my_builder=Builder.newmy_builder.lines{add_li

  7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  8. ruby-on-rails - 将 Ruby 代码和文字标记与 Haml 混合 - 2

    如何用HAML编写这个ERB:#OR我可以:=some_ruby_code+":"#and=some_ruby_code%br但我不想在这里连接，我想将它写成内联:(=some_ruby_code):#and(=some_ruby_code)%br 最佳答案 =some_ruby_code+":"-#and=some_ruby_code+""编辑1:我不确定您在寻找什么。你想要其中之一吗？==#{some_ruby_code}:-#and==#{some_ruby_code}或==#{some_ruby_code}:-#and=so

  9. ruby - 打印一个范围内的数字 - 2

    我正在尝试使用以下代码打印1到50之间的所有数字:[1..50].each{|n|putsn}但是控制台打印[1..50]我想打印这样的东西1个2个3个4个...50 最佳答案 试试下面的代码:(1..50).each{|n|putsn}问题是您使用的是[]定界符而不是()定界符。 关于ruby-打印一个范围内的数字，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/14528573

  10. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

随机推荐