草庐IT

javascript - Google map v3 上的文本标签

coder 2024-05-05 原文

我最近在 Google map 上从 v2 迁移到 v3，其中一个失败的功能是使用文本标签，这是我使用第三方库 (BpLabel) 实现的

问题:
如何在 Google Maps v3 中显示文本标签，这些标签会触发诸如“鼠标悬停”之类的事件？ 注意:我不希望标记与文本标签一起可见。我只希望文本标签可见

我尝试过的:

  • 使用了 InfoWindow，但它太杂乱了，需要明确关闭覆盖层，而我需要在鼠标指针悬停在覆盖层上时关闭覆盖层
  • 使用 InfoBox，它不像 InfoWindow 那样困惑，但也没有像鼠标悬停这样的事件触发器

任何遇到类似问题的人的任何帮助，将不胜感激。

干杯，
罗黑特什

最佳答案

我认为唯一的方法是使用标记作为标签，即将标记的形状更改为您想要的标签。如何做到这一点的两个想法:

1) 使用具有自定义形状和文本的修改标记 - 例如使用 Google 生成的图像图标 Image Charts和 Infographics (如 here 或 here )。但是the google API to create such icons is deprecated without remedy! Or isn't??有一个困惑，在这里看到我的评论。

2) 使用 markerwithlabel library (通过谷歌搜索“标记中的谷歌地图文本”很容易找到)。使用此库，您可以使用带有或不带有标记图标的标签来定义标记。如果您不需要标记图标，只需设置 icon:{}:

 var marker = new MarkerWithLabel({
   position: homeLatLng,
   draggable: true,
   raiseOnDrag: true,
   map: map,
   labelContent: "$425K",
   labelAnchor: new google.maps.Point(22, 0),
   labelClass: "labels", // the CSS class for the label
   icon: {}
 });

然后您可以像使用普通标记一样使用它，即为鼠标悬停事件添加 InfoWindow!

Here is the example how to use this library for what you need .

竞争代码:

                             <!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>MarkerWithLabel Mouse Events</title>
 <style type="text/css">
   .labels {
     color: red;
     background-color: white;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     font-weight: bold;
     text-align: center;
     width: 40px;
     border: 2px solid black;
     white-space: nowrap;
   }
 </style>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<!-- <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js"></script>-->
 <script type="text/javascript" src="markerwithlabel.js"></script>
 <script type="text/javascript">
   function initMap() {
     var latLng = new google.maps.LatLng(49.47805, -123.84716);
     var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

     var map = new google.maps.Map(document.getElementById('map_canvas'), {
       zoom: 12,
       center: latLng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     var marker = new MarkerWithLabel({
       position: homeLatLng,
       draggable: true,
       raiseOnDrag: true,
       map: map,
       labelContent: "$425K",
       labelAnchor: new google.maps.Point(22, 0),
       labelClass: "labels", // the CSS class for the label
       icon: {}
     });

     var iw = new google.maps.InfoWindow({
       content: "Home For Sale"
     });

var ibOptions = {
    content: 'content'
    // other options
};

var ib = new google.maps.InfoWindow(ibOptions);

ib.open(map, this);
     google.maps.event.addListener(marker, "mouseover", function (e) { ib.open(map, this); });
     google.maps.event.addListener(marker, "mouseout", function (e) { ib.close(map, this); });


   }

 </script>
</head>
<body onload="initMap()">
<p>Try interacting with the marker (mouseover, mouseout, click, double-click, mouse down, mouse up, drag) to see a log of events that are fired. Events are fired whether you are interacting with the marker portion or the label portion.</p>
 <div id="map_canvas" style="height: 400px; width: 100%;"></div>
</body>
</html>

关于javascript - Google map v3 上的文本标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20138882/

javascriptGoogle34stronggoogle-mapsgoogle-maps-api-3google-maps-markers

有关javascript - Google map v3 上的文本标签的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby - 在院子里用@param 标签警告 - 2

    我试图使用yard记录一些Ruby代码，尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么？

  3. ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2

    我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？ 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问

  4. ruby-on-rails - openshift 上的 rails 控制台 - 2

    我将我的Rails应用程序部署到OpenShift，它运行良好，但我无法在生产服务器上运行“Rails控制台”。它给了我这个错误。我该如何解决这个问题？我尝试更新ruby​​gems，但它也给出了权限被拒绝的错误，我也无法做到。railsc错误:Warning:You'reusingRubygems1.8.24withSpring.UpgradetoatleastRubygems2.1.0andrun`gempristine--all`forbetterstartupperformance./opt/rh/ruby193/root/usr/share/rubygems/rubygems

  5. ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2

    我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que

  6. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  7. ruby-on-rails - Ruby - 如何从 ruby​​ 上的 .pfx 文件中提取公钥、rsa 私钥和 CA key - 2

    我有一个.pfx格式的证书，我需要使用ruby​​提取公共(public)、私有(private)和CA证书。使用shell我可以这样做:#ExtractPublicKey(askforpassword)opensslpkcs12-infile.pfx-outfile_public.pem-clcerts-nokeys#ExtractCertificateAuthorityKey(askforpassword)opensslpkcs12-infile.pfx-outfile_ca.pem-cacerts-nokeys#ExtractPrivateKey(askforpassword)o

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

  9. ruby-on-rails - rspec - 我怎样才能让 "pendings"有我的文本而不仅仅是 "No reason given" - 2

    我有这个代码:context"Visitingtheusers#indexpage."dobefore(:each){visitusers_path}subject{page}pending('iii'){shouldhave_no_css('table#users')}pending{shouldhavecontent('Youhavereachedthispageduetoapermissionic错误')}它会导致几个待处理，例如ManagingUsersGivenapractitionerloggedin.Visitingtheusers#indexpage.#Noreason

  10. 带有 attr_accessor 的类上的 Ruby instance_eval - 2

    我了解instance_eval和class_eval之间的基本区别。我在玩弄时发现的是一些涉及attr_accessor的奇怪东西。这是一个例子:A=Class.newA.class_eval{attr_accessor:x}a=A.newa.x="x"a.x=>"x"#...expectedA.instance_eval{attr_accessor:y}A.y="y"=>NoMethodError:undefinedmethod`y='forA:Classa.y="y"=>"y"#WHATTT?这是怎么回事:instance_eval没有访问我们的A类(对象)然后它实际上将它添加到

随机推荐