程序员经验分享-hwhale

向 Google 地图添加多个标记

2023-12-26

我希望为 Google 地图 v3 API 中列出的每个商家添加标记在本页 http://www.inside-guides.co.uk/brentwood/shops-and-shopping/clothes-shops.html在右上角。

我不知道如何对多个邮政编码执行此操作，但我们目前在个人业务页面 http://www.inside-guides.co.uk/brentwood/shops-and-shopping/clothes-shops/lucys-boutique-557.html对存储在数据库中的动态邮政编码使用 URLencode。

这是我们用于各个页面的代码：

<script src="http://maps.googleapis.com/maps/api/js?q=London&key=AIzaSyBaPEDyFbbnWjtvT8W3UBOM34Y7g6vK69A&sensor=false"></script>

    var map;
    function initialize() {
      var mapOptions = {
        zoom: 15,
        center: new google.maps.LatLng(51.511214,-0.119824),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var geolocate = function(address, callback) {
            $.ajax({
                    url: "http://maps.googleapis.com/maps/api/geocode/json",
                    data: {
                        "sensor": true,
                        "address": address
                    },
                    dataType: "json",
                    success: function(d) {
                        if (d.status == "ZERO_RESULTS") callback(false);
                        if (d.results && d.results[0] && d.results[0].geometry) {
                            callback({
                                "ne": d.results[0].geometry.bounds.northeast,
                                "sw": d.results[0].geometry.bounds.southwest,
                                "center": d.results[0].geometry.location
                            });
                        }
                        else callback(false);
                    }
                });
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);
      geolocate("<%=server.URLEncode(""&rsAdvert("ContactPostcode"))%>", function(c) {
            map.setCenter(new google.maps.LatLng(c.center.lat, c.center.lng));
     });
    }
    google.maps.event.addDomListener(window, 'load', initialize);

$('#myModal').on('shown', function () {
  google.maps.event.trigger(map, 'resize');
})

该页面的邮政编码是在 ASP 中生成的：

    if rsDB_Ads("ContactPostcode") <> "" then
        strTempHTML = "[ContactPostcode]"
        strDB_AdvertItem = Replace(strDB_AdvertItem, "<!--ContactPostcode-->", strTempHTML)
    Else
        strDB_AdvertItem = Replace(strDB_AdvertItem, "<!--ContactPostcode-->", "")
    End if

希望有人能帮忙..


首先，介绍如何管理多个标记。 （将代码复制并粘贴到 html 文件中，它就可以工作了...）然后您可以通过经典的 asp 从数据库等写出位置来调整代码：

    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
      <title>Google Maps Multiple Markers</title>
      <script src="http://maps.google.com/maps/api/js?sensor=false"
              type="text/javascript"></script>
    </head>
    <body>
      <div id="map" style="width: 1000px; height: 1000px;"></div>

      <script type="text/javascript">
        var locations = [
          ['Stadtbibliothek Zanklhof', 47.06976, 15.43154, 1],
          ['Stadtbibliothek dieMediathek', 47.06975, 15.43116, 2],
          ['Stadtbibliothek Gösting', 47.09399, 15.40548, 3],
          ['Stadtbibliothek Graz West', 47.06993, 15.40727, 4],
          ['Stadtbibliothek Graz Ost', 47.06934, 15.45888, 5],
          ['Stadtbibliothek Graz Süd', 47.04572, 15.43234, 6],
          ['Stadtbibliothek Graz Nord', 47.08350, 15.43212, 7],
          ['Stadtbibliothek Andritz', 47.10280, 15.42137, 8]
        ];

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 13,
          center: new google.maps.LatLng(47.071876, 15.441456),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        for (i = 0; i < locations.length; i++) {
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
          });

          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              infowindow.setContent(locations[i][0]);
              infowindow.open(map, marker);
            }
          })(marker, i));
        }
      </script>
    </body>
    </html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

googlemaps

googlemapsapi3

aspclassic

向 Google 地图添加多个标记 的相关文章

  • javascript 使用 onclick 创建按钮

    我正在尝试使用 javascript 创建一个具有 onclick 事件的按钮 该事件调用 head 中定义的函数 该函数接收相对于按钮的 dom 对象作为参数 我该怎么做呢 ex

  • JavaScript 对象引用缓存

    我们的代码库中有很多对象 它们的名称空间是为了避免冲突 Example App local view MyView 在我在代码库中看到的大多数地方 我们使用完整路径来获取对对象的引用 并且这在同一函数中重复多次 Example functi

  • 将 Javascript 变量转换为 PHP 变量

    我想使用由 videoel getCurrentTime 函数返回给我的 javascript 变量 并将其转换为 php 变量 以便我能够将其添加到我的 SQL 插入查询中 例如 INSERT INTO tblData VALUES ph

  • 如何使用 LinkedIn javascript sdk 检索包括所有字段的职位列表？

    我想要获取 LinkedIn 会员在其个人资料中输入的每个职位的 ID 头衔 摘要 开始日期 结束日期 当前状态和公司名称 我测试了一个查询休息控制台 https apigee com console linkedin我得到了想要的结果 查

  • HTML5 服务器端事件：EventSource 与包装的 WebSocket

    HTML5 服务器发送事件 SSE API 是否只是 HTML5 WebSocket 之上的受限制的 基于事件的 API 在我看来 一个EventSource只是一个WebSocket that Cannot send data 使用tex

  • Three.js - 在代码中包含网格数据

    我有这个 Three js 代码 其中 JSON 加载器从文件 models mountain json 加载网格 var Three new function this scene new THREE Scene this camera

  • 使用 jQuery 仅从字符串末尾修剪空格

    我知道 jQuery trim 函数 但我需要的是一种仅从字符串末尾修剪空格的方法 而不是开头 So str this is a string 会成为 str this is a string 有什么建议么 Thanks 您可以使用正则表达

  • 点击问题：动态生成的链接不触发点击功能

    下面是两个代码片段 由于某种原因什么也没有发生 但来自同一个 JS 文件的其他 jQuery 函数在带有 UL 的页面上执行得很好 这是在盯着我看吗 ul class paganation li 1 li li a href 2 a li

  • 在 vue.js 模板中包含外部脚本

    我是 Vue js 和 web pack 的新手 所以我决定使用 vue cli webpack 来构建初始应用程序 我试图包含一个外部脚本 例如组件 不需要的模板中 但是 Vue 警告这是不允许的 我的 index html 文件与最初生

  • Chrome Javascript 调试器暂停时不会重新加载页面

    有时 当我在 Chrome 中调试某些 javascript 并且暂停了 javascript 时 如果我尝试重新加载页面 chrome 只会 继续 调试器 单步执行到下一个断点 似乎没有任何方法可以强制 javascript 完全停止运行

  • setInterval 内的返回值

    我想在 setInterval 内返回一个值 我只想以一定的时间间隔执行一些操作 这就是我尝试过的 function git limit var i 0 var git setInterval function console log i

  • Web SQL 数据库 + Javascript 循环

    我正在尝试解决这个问题 但我自己似乎无法解决 我正在使用 Web SQL DB 但无法让循环正常使用它 I use for var i 0 i lt numberofArticles 1 i db transaction function

  • Postman - 如何计算 JSON 响应中特定对象的出现次数

    我是 JSON 和 Postman 的新手 我相信我正在尝试做一些非常简单的事情 我创建了一个 GET 请求 它将获得如下所示的 JSON 响应 在下面的例子中我想得到count响应中所有 IsArchived 属性 这些属性的数量因响应而

  • 理论上防止 WebSocket 中第一个收到的消息丢失

    服务器端代码发送消息立即地连接打开后 它向客户端发送初始配置 问候语 以下代码是在客户端 var sock new WebSocket url sock addEventListener error processError sock ad

  • RTCDataChannel发送方法不发送数据

    我的 RTCDataChannel 遇到一个奇怪的问题 我正在对 WebRTC 进行一些研究 并且已经可以进行 WebRTC 音频 视频聊天 现在我想使用 RTCDataChannel 添加文本聊天和文件共享 我已经像这样创建了 RTCDa

  • 在声明组件选择器时添加指令 - Angular 7

    我正在学习 Angular 并通过单击按钮动态创建组件 我正在尝试使用 Angular Material 的拖放功能来拖动这些创建的组件以对它们进行排序 我的基本组件 html 中有以下代码 div style margin 20px di

  • ThreeJS无法加载Json文件

    首先 我已经读过这个问题 https stackoverflow com questions 17201888 three js exporter export object not working with jsonloader r58没

  • 如何在 JavaScript 中获取浮点数的小数位？

    我想要的是与 Number prototype toPrecision 几乎相反的 这意味着当我有数字时 它有多少位小数 例如 12 3456 getDecimals 4 对于任何想知道如何更快地完成此操作 无需转换为字符串 的人 这里有一

  • Serviceworker Bug event.respondWith

    我的 serviceworker 的逻辑是 当发生获取事件时 它首先获取包含一些布尔值 而不是 event request url 的端点 并根据我正在调用的值检查该值event respondWith 对于当前的获取事件 我正在提供来自缓

  • 使用 Lodash 将对象键转换为具有键值数量的数组[重复]

    这个问题在这里已经有答案了 我有一个产品对象 products bread 1 milk 2 cheese 2 chicken 1 我想要一个包含产品名称的数组 如下所示 products bread milk milk cheese ch

随机推荐

  • SQL对多个表建立索引，可以做到吗？

    一直在寻找解决方案一段时间了 转到 1 或 2 跳过描述 首先我会解释一下情况 我公司已经升级了我们的 erp 系统 我的主要工作是创建公司其他人使用的列表 我从该系统数据库中获取所有数据 在升级过程中 我们转换了一些数据以匹配新版本 其中

  • 什么是 MySQL 外键？

    在 Stack Overflow 的一个回答中 我看到了这段代码 CREATE TABLE Favorites user id INT NOT NULL movie id INT NOT NULL PRIMARY KEY user id m

  • Sql - SELECT 行，直到行的总和达到某个值

    我在这里看到了其他类似的问题 但它们并不能完全满足我的需求 至少我是这么认为的 我有一个包含以下列的 receipts 表 收据 客户ID 数量 让我们说 我有 5 张来自客户 1 的未付款收据 reciept id 1 Ammount 1

  • 如何链接到 boost date_time

    Example 我有一个 Rcpp 函数 我想调用它boost posix time time from string 我从以下位置获取了示例代码增强文档 https www boost org doc libs 1 65 0 doc ht

  • Java包循环检测：如何找到涉及的具体类？ [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 您推荐什么工具来检测Java包循环依赖 知道目标是明确列出检测到的 跨包循环 中涉及的特定类 我知道关于

  • ASP.NET 中的基本表单身份验证有多安全？

    想象一下 您有一个只有 2 个页面的简单网站 login aspx 和 Secret aspx 仅使用 ASP net 表单身份验证和 login aspx 上的 ASP net 登录服务器控件来保护您的站点 详情如下所示 该站点配置为使用

  • 如何在mySQL中动态选择列名

    我想选择列名 但我事先不知道表结构 并且它可能会改变 所以我不能只用列名对 select 语句进行硬编码 我也不想选择每一列 有没有简单的方法可以做到这一点 我的想法是这两个查询的某种组合 但我的 SQL 不是那么好 SHOW COLUMN

  • 是什么导致我的参数超出范围异常？ [复制]

    这个问题在这里已经有答案了 我试图测试我的列表是否正在从数据库收集数据 但是当我尝试获取消息框以从列表中打印邮政编码时 它给了我例外 System ArgumentOutOfRangeException 索引超出范围 必须为非负数且小于集合

  • Android 图像缓存 - 如何？

    我想以前已经问过很多次了 但仍然有些事情我不太明白 我尝试了两种不同的方法 将所有图像保留在内存中 当开始超过一定限制时 开始删除它们 让 Android 使用 SoftReferences 解决这个问题 2 有时 我分配它们时 它只是清理

  • 如何处理文件路径中的 ~

    我正在编写一个简单的命令行 Java 实用程序 我希望用户能够使用以下命令传递相对于其主目录的文件路径 操作员 所以像 Documents 我的问题是有没有办法让Java自动解析这种类型的路径 或者我是否需要扫描文件路径 操作员 看来这种类

  • 为什么 Perl 函数“map”给出错误“Map 参数不足”

    这是我不明白的事情 该脚本工作正常 注意映射函数中的串联 usr bin perl use strict use warnings use Data Dumper my aa map a gt 1 1 3 print Dumper aa E

  • 使用 Jinja2 在 html 文件中嵌入 png 图像

    我正在使用 Jinja2 将 html 报告创建为单个 html 文件 我想在 html 文件中包含公司徽标 而不是链接到它 这样 即使阅读报告的人处于离线状态 也会显示徽标 使用 Jinja2 可以自动完成此操作吗 如果不是 我如何手动在

  • 我可以阻止手机在网页上休眠吗

    在应用程序中我可以使用http developer android com reference android os PowerManager WakeLock html http developer android com referen

  • 虚函数表偏移量

    我想问一下 类的虚函数表的偏移量取决于什么 我的意思是 从我读到的内容来看 它至少取决于编译器 但它是否因类而异 编辑 通过偏移我的意思是表相对于所有者对象的地址的位置 编辑 示例代码 void vtable void char objec

  • 为什么在使用 MSpec/Moq 测试此异步方法时会收到 NullReferenceException？

    我想测试异步方法是否返回正确的类型 此方法使用依赖类中的另一个异步方法 依赖类实现此接口 Task

  • 在 dotnet core SDK 版本之间切换

    我最近安装了 VS 2017 RC 然后我的 dotnet 版本自动指向1 0 0 preview4 004233 因此 每当我使用命令创建新项目时dotnet new t Console我看不见project json虽然我看到 cspr

  • 如何在quarkus microprofile案例中配置rest客户端

    当使用 Quarkus microprofile 作为 REST 客户端时 如何配置底层 HttpClient 比如重试次数 每个主机的连接池大小等等 另外是否可以以某种方式强制客户端重新启动 因此连接池将重新启动 https downlo

  • 转发器内动态控件的视图状态问题

    最近 我在使用要添加动态控件的中继器时遇到了一个问题 虽然我有一个解决方法 在功能上完全符合我想要的功能 但我想知道是否有更好的方法为了我的理解 我使用 ASP NET 已经有大约 6 个月了 每次我认为我已经掌握了页面生命周期 视图状态时

  • 使用expect脚本从远程机器执行ssh

    我是expect脚本的新手 并且有一个用例 在该用例中 我需要从已经使用expect脚本完成ssh的机器上执行ssh 这是我的代码片段 usr bin expect f set timeout 60 spawn ssh email prot

  • 向 Google 地图添加多个标记

    我希望为 Google 地图 v3 API 中列出的每个商家添加标记在本页 http www inside guides co uk brentwood shops and shopping clothes shops html在右上角 我

热门标签