基于标记的 Google 地图居中

2023-12-27

我想根据动态加载的标记将我的 Google 地图居中。我已经看到了“边界”的使用并尝试实现“适合边界”,但我无法将其正确应用到我的地图上。这是代码:

var MapStart = new google.maps.LatLng(41.664723,-91.534548);

var markers;
var map;
var infowindow = new google.maps.InfoWindow({maxWidth: 650});

function initialize() {
    markers = new Array();
    var mapOptions = {
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: MapStart
    };

    map = new google.maps.Map(document.getElementById("map"), mapOptions);

    $("#map_list ul li").each(function(index) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng($(this).children(".marker_long").text(), $(this).children(".marker_lat").text()),
            map: map,
            animation: google.maps.Animation.DROP,
            title : $(this).children(".marker_title").text(),
            brief: $("div.infoWindow", this).html()
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(marker.brief);  
            infowindow.open(map, marker);
        });

        markers.push(marker);
    });
}

这很简单,在初始化方法中创建一个边界对象,然后用每个标记的位置扩展该边界对象。最后,在地图对象上调用 map.fitBounds() 以使地图居中并适合标记:

function initialize() {
    ...
    var bounds = new google.maps.LatLngBounds();
    ...
    $("#map_list ul li").each(function(index) {
        ...
        //extend the bounds to include each marker's position
        bounds.extend(marker.position);
        ...
    });
    ...
    //now fit the map to the newly inclusive bounds
    map.fitBounds(bounds);
    ...
}

//(optional) restore the zoom level after the map is done scaling
var listener = google.maps.event.addListener(map, "idle", function () {
    map.setZoom(15);
    google.maps.event.removeListener(listener);
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

基于标记的 Google 地图居中 的相关文章

  • 零作为 IIFE 中的第一个参数[重复]

    这个问题在这里已经有答案了 In babeljs v6 5 1 class Foo 编译为 use strict var classCallCheck2 require babel runtime helpers classCallChec
  • 在 asp.net vb 中通过第一个下拉列表值填充第二个下拉列表

    我在使用 asp net vb 时遇到了一些问题 我想做的是有2个下拉框 第一个下拉菜单将有 1 2 3 例如 第二个下拉菜单将有 A 乙 C 默认情况下 但是 如果选择 1 我希望第二个下拉菜单自动选择 c 我不知道 JavaScript
  • Youtube 播放器 Iframe,在 Firefox 上有声音但没有视频

    我正在使用 YT Player API 在滑块内创建多个 iframe youtube 视频 第一个视频在 onYouTubeIframeAPIReady 之后调用 当我单击正常工作的下一个按钮时 会出现下一个视频 但是当我尝试在 Fire
  • Chrome SuppressDifferentOriginSubframeJSDialogs 使用 JS 设置覆盖?

    Chrome 开发团队显然刚刚推出了一项名为 SuppressDifferentOriginSubframeJSDialogs 的新 功能 这使得默认情况下不会显示来自与父级不同域上的 iFrame 的警报 确认框 https www ch
  • JQuery 动画文本

    找到简单 简单的动画文本是非常困难的 喜欢这个网站上的 内爆 http codecanyon net item jquery text animation full screen preview 233445 http codecanyon
  • jquery 通过 div 选择复选框

    我想知道 jQuery 中是否有一种方法可以在有人单击整个 div 层时选中 取消选中复选框 本质上就像有一个巨大的选择区域 有任何想法吗 这是一个例子 我试图使复选框周围可单击以切换单个复选框 几乎如此 fieldset div div
  • 是否可以覆盖 javaScript 原始数据类型?

    问题是不言自明的 我知道可以扩展原始数据类型 例如string但有可能覆盖它吗 这是在采访中被问到的一个问题 不 你不能覆盖任何东西 Ecma脚本定义原始类型 http es5 github com x4 3 2 Undefined Nul
  • 在 JavaScript 中比较表单中的两个数字

    当我尝试比较不同的数字时 数字发生变化 但文本部分保持不变 这只发生在较大 较小的情况下 而不会发生在 NaN 或相等的情况下 这是我的代码 function check var a document getElementById a va
  • Telegram 授权无默认按钮

    使用 Telegram 第 3 方授权的唯一有记录的方法是使用其提供的脚本https core telegram org widgets login https core telegram org widgets login 这个脚本 正如
  • Bing.com 如何创建放大的缩略图?

    当我使用 Bing com 搜索图像时 我发现它们的图像经过精心裁剪和排序 当您将鼠标放在图像上时 会弹出另一个窗口 其中显示放大的图像 我想在我的程序中做同样的事情 我检查了他们页面的源代码 他们正在使用 javascript 但我仍然不
  • jQuery Blur() 在 Chrome 上不起作用

    我在 MacOSX 上运行这个http jsfiddle net q84wv http jsfiddle net q84wv on Chrome最新版本 它不会工作 在 Firefox 上运行时它工作得很好 有什么线索吗 假设您想要aler
  • 使用 Javascript / Jquery 的本地存储(不使用 HTML5)

    我想在 javascript 或 jquery 中复制本地存储概念 类似于 HTML5 但不幸的是我不知道如何开始 任何人都可以建议如何使用 javascript 或 jquery 实现本地存储 不使用 HTML5 这是一个有点愚蠢的差事
  • 使用 jQuery 仅从字符串末尾修剪空格

    我知道 jQuery trim 函数 但我需要的是一种仅从字符串末尾修剪空格的方法 而不是开头 So str this is a string 会成为 str this is a string 有什么建议么 Thanks 您可以使用正则表达
  • 空 URL 哈希导致页面在 js 事件上跳转

    我有一个带有下一个和上一个按钮的照片库 如果我的某个 javascript 方法由于某种原因被破坏 那么当单击其中一个按钮时 它会向 url 添加一个哈希值 即 www google com 我知道可以给散列一个 div id 来跳转到页面
  • 将 JavaScript 引擎嵌入到 .NET 中 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 只是想知道是否有人尝试过将任何 js 引擎嵌入并实际集成到 net 环境中 我可以找到并实际使用 经过L
  • 常规 JavaScript 可以与 jQuery 混合使用吗?

    例如 我可以采用这个脚本 来自 Mozilla 教程 https developer mozilla org en Canvas tutorial Basic usage
  • 如何清除隐藏上的引导模式

    如何在关闭 隐藏 关闭时清除引导模式 我有以下模态定义
  • 如何在 JavaScript 中获取浮点数的小数位?

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

    我的 serviceworker 的逻辑是 当发生获取事件时 它首先获取包含一些布尔值 而不是 event request url 的端点 并根据我正在调用的值检查该值event respondWith 对于当前的获取事件 我正在提供来自缓
  • android-如何在谷歌地图上将标记的位置显示为地址

    我已经尝试过 commonsware googlemapsv2 教程 特别是在地图上拖动标记 但现在另一个问题困扰着我 问题是如何将标记的当前位置显示为地图下方或上方的地址 字符串 这是我使用的代码 public class MainAct

随机推荐

  • 有没有办法在 Spring XML 中指定默认属性值?

    我们正在使用一个属性占位符配置器在 Spring 配置中使用 java 属性 详细信息在这里 http static springsource org spring docs 2 5 x reference beans html beans
  • 使用 WinHTTP 和 Excel 配置代理

    我正在使用 WinHTTP 在 Excel VBA 宏中执行 GET 请求 但是 如果我尝试从具有代理的网络中的计算机发出请求 则它不起作用 如果我手动配置它 它可以工作 但我认为使用我正在开发的工具的人不会知道他们的代理服务器 有没有办法
  • 为什么 _.escape 会修改 Underscore.js 中的 / 字符?

    我正在浏览下划线 js api http underscorejs org escape我注意到 escape逃脱 lt gt and 人物 让我惊讶的是逃跑 有没有理由逃避 我不知道的角色 EDIT 好吧 看来是推荐的OWASP http
  • MVC 3 实体框架中从多对多链接表添加关系时发生主键冲突

    我已经阅读了这里的许多问题 这些问题乍一看似乎有类似的问题 但看起来并不完全相同 如果这个问题在某个地方得到了回答 我深表歉意 但就像我说的 我已经阅读了很多内容 但找不到答案 我正在使用实体框架和 MVC 3 我正在尝试向实体框架中的产品
  • JavaScript:V8 问题:小整数是否被合并?

    正在看这个V8设计文档 https docs google com document d 11T2CRex9hXxoJwbYqVQ32yIPMh0uouUZLdyrtmMoL44 edit 其中有一个部分用于Constant Pool En
  • CoreBluetooth配对反馈/回调

    感觉好像我在这里遗漏了一些东西 但是我如何获得有关密码保护的外围设备配对失败还是成功的反馈 当我连接受密码保护的外围设备时 会弹出密码 UIAlertView 并且外围设备会立即连接 调用 didConnectPeripheral 并断开连
  • MS Sql:条件 ORDER BY ASC/DESC 问题

    我想使查询中的排序成为有条件的 因此如果它满足条件 则应按降序排序 例如 SELECT FROM Data ORDER BY SortOrder CASE WHEN Direction 1 THEN DESC END 不要改变ASC or
  • 使用 NLTK 和 WordNet;如何将动词简单时态转换为现在时、过去时或过去分词形式?

    使用 NLTK 和WordNet https en wikipedia org wiki WordNet 如何将动词简单时态转换为现在时 过去时或过去分词形式 例如 我想编写一个函数 它会给我预期形式的动词 如下所示 v go presen
  • Docker:使用 dockerfile 在 Windows 容器上安装 chrome

    我正在尝试在我的 Windows 容器上安装 Chrome 我已经使用 dockerfile 创建了我的 docker 映像 并且我想使用此 dockerfile 安装 chrome 我尝试过使用以下命令 RUN apt get updat
  • 我可以在运行 VS 单元测试时进行调试吗?

    我想对使用自定义事件的用户组件进行单元测试 当不使用 VS 单元测试框架 debug assert 执行此操作时成功 当使用 VS 单元测试框架执行相同的操作时 断言失败 这是不合逻辑的 所以我想在使用 VS 框架进行单元测试时进行调试 但
  • C++ 后端和 C# 前端?

    我有一个项目 在该项目中 我必须每秒处理 100 条 如果不是 1000 条 消息 并相应地在图表上处理 绘制这些数据 用户将搜索一组数据 其中将实时绘制图表 而不必在图表上绘制数千个值 我无法理解使用 DLL 在 C 中进行大量消息处理
  • Android Studio 无法识别我的设备

    问题就在这里 我想在我的设备 Samsung Galaxy Ace 2 上运行 Android Studio 应用程序 但对我来说没有任何作用 告诉我我错过了什么 1 USB调试打开 2 ADB驱动程序已安装 在设备管理器中我可以看到And
  • 将视图或窗口添加到 MainWindow

    我在一些我无法理解的基本概念上遇到了困难 我希望有人能为我解决一些问题 因为我没有找到可以解释这一点的资源 或者也许 它在明亮的地方 但我只是看不到它 到目前为止的理解 主窗口包含菜单 因此或多或少是必要的 这info plist持有笔尖
  • Firebase 错误:TypeError:无法使用“in”运算符在未定义中搜索“_delegate”

    我是 firebase 的新手 过去两天在查询和删除集合中的文档时遇到了一些困难 具体来说 每次启动服务器时 我都会尝试清除公司虚拟数据的整个集合 然后再循环虚拟数据并将其写入集合 以防止重复 我已经能够将我的公司虚拟数据写入我的 公司 集
  • 如何在 Android 模拟器中运行 YouTube 视频

    我制作了一个程序 在列表视图中获取 YouTube 视频列表 并且还实现了 onClick 来源 我遵循了有关如何使用 youtube gdata 的教程 使用来自 youtube 的视频和 onclick 填充列表视图 源代码可在以下位置
  • RestTemplate 与正文一起获取

    如何使用休息模板来获取身体 基于以下问题 通过 JSON 格式的 RestTemplate 进行 POST 请求 https stackoverflow com questions 4075991 post request via rest
  • Fabric Javascript SDK 和 Hyperledger Composer 之间有哪些功能差异?

    除了 Composer 使原型业务网络的部署和测试变得更加容易 以及我们不需要了解 golang 来开发链代码这一事实之外 这些接口提供的功能有何差异 可能会导致人们选择其中之一另一个 这篇文章或许可以为您提供所需的答案 https blo
  • 高精度事件定时器

    include target h include xcp h include LocatedVars h include osek h This task is activated every 10ms long OSTICKDURATIO
  • NSJSONSerialization 不创建可变容器

    这是代码 NSError parseError NSMutableArray listOfObjects NSJSONSerialization JSONObjectWithData dataUsingEncoding NSUTF8Stri
  • 基于标记的 Google 地图居中

    我想根据动态加载的标记将我的 Google 地图居中 我已经看到了 边界 的使用并尝试实现 适合边界 但我无法将其正确应用到我的地图上 这是代码 var MapStart new google maps LatLng 41 664723 9