jjzjj

javascript - 每个标记的 InfoBox (getElementById) – Google Maps API 3

coder 2024-04-20 原文

我将 Google Maps API v3 与 InfoBox 结合使用，以便设置点击标记时出现的弹出窗口的样式。

这是我的信息框设置:

// New InfoWindow
infobox = new InfoBox({
    content: document.getElementById('marker-info'),
    disableAutoPan: false,
    pixelOffset: new google.maps.Size(-140, 0),
    zIndex: null,
    closeBoxMargin: '10px 9px 12px 0',
    closeBoxURL: siteURL + 'wp-content/themes/bmk-wp-build/img/close-google-popup.png',
    infoBoxClearance: new google.maps.Size(1, 1)
});

我有一个带有许多标记的 Google map ，它是使用 ACF 和 Locations 字段通过 Wordpress 设置的。一切正常，但唯一的问题是 InfoBox 为每个标记输出相同的内容。这显然与这一行有关:

content: document.getElementById('marker-info'),

这是我的 PHP/HTML:

<?php while ( $company_query->have_posts() ) : $company_query->the_post(); ?>
<?php $location = get_field('location'); if ( !empty($location) ) : ?>
    <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>" id="<?php echo get_the_ID(); ?>">
        <div id="marker-info" class="marker-info <?php echo get_the_ID(); ?>">
            <?php echo wp_get_attachment_image(get_field('logo'), 'full'); ?>
        </div>
    </div>
<?php endif; ?>
<?php endwhile; ?>

显然，在 while 循环中设置 id 是个坏主意，而且很愚蠢，所以我显然可以摆脱它，但我该如何改变:

content: document.getElementById('marker-info'),

获取每个标记的每个信息框的每个 .marker-info？

最佳答案

我用这个...解决了这个问题

google.maps.event.addListener(marker, 'click', function() {
    console.log( $marker.children().html() );

    infobox.open(map,marker);
    infobox.setContent($marker.children().html());

});

关于javascript - 每个标记的 InfoBox (getElementById) – Google Maps API 3，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22178185/

getElementByIdjavascriptmarkercodesectionphpwordpressgoogle-mapsgoogle-maps-api-3

有关javascript - 每个标记的 InfoBox (getElementById) – Google Maps API 3的更多相关文章

  1. ruby - 将n维数组的每个元素乘以Ruby中的数字 - 2

    在Ruby中，是否有一种简单的方法可以将n维数组中的每个元素乘以一个数字？这样:[1,2,3,4,5].multiplied_by2==[2,4,6,8,10]和[[1,2,3],[1,2,3]].multiplied_by2==[[2,4,6],[2,4,6]]？(很明显，我编写了multiplied_by函数以区别于*，它似乎连接了数组的多个副本，不幸的是这不是我需要的)。谢谢! 最佳答案 它的长格式等价物是:[1,2,3,4,5].collect{|n|n*2}其实并没有那么复杂。你总是可以使你的multiply_by方法:c

  2. 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发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. ruby - 每个页面上的 Jekyll 分页 - 2

    据我们所知，Jekyll默认分页仅支持index.html，我想创建blog.html并在那里包含分页。有什么解决办法吗？ 最佳答案 如果您创建一个名为/blog的目录并在其中放置一个index.html文件，那么您可以向_config.yml表示paginate_path:"blog/page:num"。不是使用根文件夹中的默认index.html作为分页器模板，而是使用/blog/index.html。分页器将根据需要生成类似/blog/page2/和/blog/page3/的页面。这将使您到达yourwebsite.com/b

  4. 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

  5. ruby - `gem install` 多个 gem 的语法是什么，为每个 gem 指定版本？ - 2

    如何使用geminstall同时安装多个gem，同时指定我想要的版本？例子:geminstallakami-v1.2.0--ignore-dependenciesgeminstallatomic-v1.1.14--ignore-dependenciesgeminstallaws-s3-v0.6.2--ignore-dependenciesgeminstallbackports-v3.3.0--ignore-dependenciesgeminstallbrendanlim-sms-fu-v1.0.0--ignore-dependenciesgeminstallbuilder-v3.1.3

  6. ruby-on-rails - 未定义的方法每个 rails 错误 - 2

    我正在通过位于http://ruby.railstutorial.org的教程在Rails上试用ruby.我已经到了可以创建用户并将他们的姓名和头像显示在以下位置的地步:http://localhost:3000/users/1现在我想在用户访问时显示所有用户:http://localhost:3000/users/这是我的Controller:classUsersController这是我的看法。#Viewforindexactioninuser'scontroleerAllusers我收到以下错误。undefinedmethod`each'fornil:NilClass谁能告诉我为

  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 未定义的方法 - 2

    破败。一个人可以有很多出价，这个人只有一个出价。在我的索引操作中，我有@bids=Bid.find_by_person_id(params[:person_id])在我看来是的我得到NoMethodError:undefinedmethodeach'for#在访问人员出价的索引View时。这是因为这个人只有一个出价吗？我觉得不是这样，但除此之外我很茫然.. 最佳答案 find_by返回第一项。我想你在找Bid.where(person_id:params[:person_id]) 关于r

  9. 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

  10. ruby - 在 Ruby 中添加到数组中的每个元素 - 2

    有没有办法在数组的每个元素前加上一些东西。例如:file=File.new(my_file,'r')header=IO.readlines(my_file)[1]#headerlookslike[1,2,3]#Prependeachelelementofheaderwithfilename,somethinglikeheader.prepend(filename+".")#headerlookslike[filename.1,filename.2,filename.3] 最佳答案 您想使用map:["foo","bar","baz"

随机推荐