javascript - 如何在 Google map v3 中的每个标记上添加编号？-6ren

javascript - 如何在 Google map v3 中的每个标记上添加编号？

转载作者：行者123 更新时间：2023-11-29 10:50:34

25

4

我想问大家有关如何使用 JavaScript 在 Google Maps v3 中的每个标记上动态添加数字的问题。例如，第一个标记是 1，第二个是 2，等等。在这种情况下，我有这样的位置数据:

[
 new google.maps.LatLng(1.3667, 103.8000),
 new google.maps.LatLng(1.3667, 103.8000), 
 new google.maps.LatLng(1.3667, 103.8000),
 new google.maps.LatLng(1.3667, 103.8000),
 new google.maps.LatLng(51.0000, 9.0000),
 new google.maps.LatLng(51.0000, 9.0000),
 new google.maps.LatLng(51.5142, -0.0931),
 new google.maps.LatLng(51.5142, -0.0931),
 new google.maps.LatLng(54.0000, -2.0000),
 new google.maps.LatLng(51.6000, -1.2500),
 new google.maps.LatLng(51.7500, -1.2500)
];

但是这些数据是动态变化的。因此，对于第一个位置的纬度/经度，我将在第一个标记上给出数字 1，在第二个标记上给出数字 2，等等。而且我还使用了每个标记的图标:

"http://chart.apis.google.com/chart?chst=d_map_xpin_letter_withshadow&chld=pin_star|%E2%80%A2|CC3300|000000|FF9900"

我必须更改标记图标吗？我真的需要您的建议或示例代码来解决问题。请帮忙。非常感谢您的帮助。

最佳答案

您可以保留加星标的图钉图标并在其旁边添加一个不显眼的标签。这个标签可以说任何东西，但我只保留了一个数字。这是 MarkerWithLabel library ( download here )

演示 http://jsfiddle.net/yV6xv/21/

pin with number

您还需要为其定义一个 CSS。

  .labels {
     color: blue;
     background-color: white;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 12px;
     font-weight: bold;
     text-align: center;
     width: 25px;
     border: 1px solid black;
     white-space: nowrap;
   }

并用 MarkerWithLabel 替换您的常规标记:

for (var i = 0; i < point.length; i++) {
    var marker = new MarkerWithLabel({
        map: map,
        position: point[i],
        icon: pinImage,
        shadow: pinShadow,
        labelContent: i,
        labelAnchor: new google.maps.Point(12, -5),
        labelClass: "labels"
    });
}

包含在 HTML 文件中

  <head>
    <style type="text/css">
      html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
      .labels {
        color: blue;
        background-color: white;
        font-family: "Lucida Grande", "Arial", sans-serif;
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        width: 25px;
        border: 1px solid black;
        white-space: nowrap;
      }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/src/markerwithlabel_packed.js"></script>

    <script type="text/javascript">
      var map;
      var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP };
      ...

关于javascript - 如何在 Google map v3 中的每个标记上添加编号？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10958722/

25

4

0

文章推荐： javascript - 如何正确使用SWFObject

文章推荐： javascript - Mac 商店应用程序 : written in JavaScript

文章推荐： ios - 如何从 OSX 终端将文件推送到未越狱的 iPad/iPhone？

ruby-on-rails - Faker gem : How to set max. 长度/范围。公司.名称/编号.编号？
我使用 Faker gem 来播种某些数据。我怎样才能设置最大。假公司名称的长度，如何设置假号码的范围？ name = Faker::Company.name 这里我想包括最大长度，因为名称对最大长
php - php中的排名/编号
我试图实现一种方法，在该方法中我创建一个记分板(while 循环)并按某个数字字段(点)对获取的结果进行排序。但我需要实现的是如下 rank----username--point 1st------t
delphi - 编号 ListView
如何在 ListView (vsReport) 中对项目进行编号？现在我有类似的东西: Item := ListView1.Items.Add; Item.Caption :=inttostr(Ite
JQuery 编号 id
我正在尝试使用几个按钮在红色和绿色之间切换，我已经浏览了 Jquery 文档，但我似乎无法弄清楚这个。您可以在我的代码片段中看到，当我单击按钮时，所有按钮都会变成不同的颜色。而且必须有一种更短的方
mysql - GROUP_CONCAT 编号
是否可以在 GROUP_CONCAT 中进行编号喜欢如果，来自 GROUP_CONCAT(empnam SEPARATOR ', ') 我有一套，我需要我试过跟随，但没有得到想要的结
Linux输入事件接口(interface)编号
在 Linux 中，如何使用用户指定的事件编号创建输入事件接口(interface)并将其映射到特定的设备事件？我正在使用 gpio-keys 驱动程序来翻译键盘上的按键操作。我定义了要在我的板配置
c++ - 模板参数的编译时间计数/编号
对于低级应用程序，我在编译时将某种索引定义为一种类型: template class Idx{ using TYPE = T_; static const int IDX = IDX_; }
带括号的 HTML 编号
请问如何设置这种格式的编号: 1) number 1 2) number 2 3) ... 在 HTML 中？我只找到了一种获取这种格式的方法: 1. number 1 2. number 2 3.
git - 如何获取上一次提交的 SHA 编号？
对于我的研究，我需要很少的数据，其中之一是前一次提交的 SHA 编号，即如果我提供特定的提交编号/SHA 编号，我应该能够获得它之前的 SHA 编号。帮我用 git 命令来获得相同的结果。最佳答案
XNA key 编号 1
我需要询问何时按下数字 1 键，而不是在数字键盘上，而是在 Q 上方的数字 1(试图使这尽可能清楚)。我已经浏览了 Keys 数组上所有可用的键，但没有一个匹配我正在寻找的键。有没有办法做到这一点
Git 和增量提交日期/编号/某事
我正在尝试使用 NAnt 任务设置构建服务器。我有几个想要构建的 Git 存储库，但我在结果的版本控制方面遇到了问题。如何对库 (dll) 进行版本控制，以便每个构建都使用一个数字来表示每个版本？我
sql - 生成 list 编号
我有一个如下所示的表格: +-------+--------+--------+ | Grp | Party | Member | +-------+--------+--------+ | F
SQL 编号 - Row_Number() - 允许重复行号
我正在使用 SQL Server 2008。我在查询中返回了这些数据，看起来非常像按 Day 和 ManualOrder 排序的... ID Day ManualOrder Lat L
.net - Silverlight 文本框中的行信息/编号
区域:Silverlight 中的文本框问题:我需要知道当前编辑的是什么“行号”。我试过:作为一种解决方法，我尝试使用 textBox.Split("\r") 进行拆分，并计算 Regex 上具有
基于数据集中先前数字的 Pandas DataFrame 编号
提前致歉，我不确定如何将 null 值添加到 pandas 数据框，所以我在列表中放置了“无”。我有一个具有以下值的数据框: None, None, 50,60,70,80,90,None,None,
ios - 获取标签栏的当前角标(Badge)编号
我的应用程序中有一个标签，其中会带有徽章编号，该标签基于3个不同时间发生的3种不同操作。我知道如何使用以下方式设置标签栏标志: [[[[[self tabBarController] tabBar]
iphone - 供应商需要的 SKU 编号
有谁知道为什么我们的供应商需要我们的 sku 编号来开发新应用程序？我们自己将应用程序带入应用程序商店，也许我错了，但构建应用程序或将其上传到商店不需要 sku - 它仅在 iTunes 中连接而不
java - 从字符串中过滤掉 UUId 编号
这个问题已经有答案了: Rationale for Matcher throwing IllegalStateException when no 'matching' method is called
ios - 如何在保留通知中心的同时清除角标(Badge)编号
我使用[[UIApplication sharedApplication] setApplicationIconBadgeNumber:0]清除徽章编号。它工作正常，但同时删除了远程通知。还有许多其
ios - 何时在iOS中更新图标角标(Badge)编号？
我有一个待办事项列表应用程序，我想在图标徽章中显示未完成任务的数量。我的问题是:我是否应该在用户每次在应用程序中删除/添加新任务时更新徽章编号，还是仅在应用程序即将进入后台模式时更新徽章编号？最佳

首页

博学

6Ren·AI

商城

javascript - 如何在 Google map v3 中的每个标记上添加编号？