加载时将 Google 地图信息窗口居中

2024-03-20

我在将 InfoWindow 集中在页面加载时遇到问题。加载时,地图以标记为中心,这使 InfoWindow 离开屏幕(我正在使用地图容器的较短高度)。

现在,单击标记确实会将地图重新​​置于信息窗口的中心,使其看起来与我想要的一模一样。在这种情况下,我什至尝试触发marker.click触发器来实现加载解决方案,但没有运气。我缺少什么?

JSFIDDLE:http://jsfiddle.net/q9NTS/7/ http://jsfiddle.net/q9NTS/7/

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
    var geocoder = new google.maps.Geocoder();
    var marker;
    var infoWindow;
    var map;
    function initialize() {
        var mapOptions = {
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
        setLocation();
    }

    function setLocation() {
        var address = '@(Model.Event.Address)' + ', ' + '@(Model.Event.City)' + ', ' + '@(Model.Event.State)' + ' ' + '@(Model.Event.Zip)';
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var position = results[0].geometry.location;
                marker = new google.maps.Marker({
                    map: map,
                    position: position,
                    title: '@(Model.Event.Venue)'
                });
                map.setCenter(marker.getPosition());

                var content = 'blah';
                infoWindow = new google.maps.InfoWindow({
                    content: content
                });

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

                //infoWindow.open(map, marker); doesn't work
                google.maps.event.trigger(marker, 'click'); //still doesn't work
            }
            else {
                //
            }
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

显然您只需要等待更长的时间即可触发点击事件。

// wait until the map is idle.
google.maps.event.addListenerOnce(map, 'idle', function() {
  setTimeout(function() {
    // wait some more (...)
    google.maps.event.trigger(marker, 'click'); //still doesn't work
  },2000);
});

fiddle http://jsfiddle.net/Mhs9L/2/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

加载时将 Google 地图信息窗口居中 的相关文章

随机推荐

  • 向“self”发送消息会导致调用初始化方法吗?

    我有两节课Foo and Bar require pry byebug require fileutils class Foo lt Pathname include FileUtils def initialize path puts I
  • React 中的 props.children 不能是无状态组件吗?

    我正在尝试在 React 中练习渲染道具模式 但出现了以下错误 this props children 不是一个函数 这是我的代码 import React from react import render from react dom c
  • 在小程序或 Google AppEngine 中托管 Java 编译器?

    在网上搜索我发现Javac编译器是用Java编写的 并且我还查看了Sun网站上的源代码 来源相当大 我无法取得任何进展 此外 Eclipse 项目内部嵌入了一个编译器 但谁能接触它的源代码 所以我想我应该向你提出几个问题 Java 编译器可
  • 写入自己的日志文件的 Firefox 扩展

    经过一整天的研究如何将浏览器中的内容写入本地文本文件 我正在考虑诸如带有日志文件的 Firefox 扩展之类的东西 有什么方法可以让我的分机写入我的分机 意味着 在我的扩展内有一个日志文件 有关信息 我正在为 Linux 平台进行开发 有关
  • 为 F# 记录值生成的 IntelliSense XML 不正确 (VS2013)

    Update 正如评论中指出的 这是一个错误 我有向微软报告了此事 https connect microsoft com VisualStudio feedback details 816006 incorrect intellisens
  • 在延迟表达式求值中,R Shiny 使用变量的更改值

    这是问题的简单演示 library shiny ui lt fluidPage textOutput Text1 textOutput Text2 server lt function input output for i in 1 2 i
  • 如何将 Nest.js 微服务拆分为单独的项目?

    假设我想创建一个简单的影院管理平台 它需要很少的微服务 movies cinemas payments etc 你会如何在 Nest js 中做到这一点 我不希望它们位于同一个大文件夹中 因为这感觉就像制作一个整体 我希望它们成为单独的 N
  • 无法包含 Microsoft.Security.Application?

    我不能包括微软 安全 应用程序 using Microsoft Security Application 给出这个错误 命名空间 Microsoft 中不存在类型或命名空间名称 Security 是否缺少程序集引用 是的 我点击了Bin g
  • Java 序列化库,无需无参数构造函数和 Serialized 实现

    java世界中是否有任何方法可以在不需要无参数构造函数和Serialized实现的情况下进行序列化 Look at XStream http xstream codehaus org JSX http jsx org or 谷歌协议缓冲区
  • AMF消息结构?

    Adobe s AMF 格式的文档 http opensource adobe com wiki download attachments 1114283 amf3 spec 05 05 08 pdf似乎并没有实际指定整个 AMF 消息的结
  • 连接4条信息并保存

    保存 编辑和加载信息 我想要加载的信息是我自己添加的 每行信息将包含 4 条信息 字符串 整数 字符串 整数 通过 4 个单独的编辑框和一个按钮 我会将这些信息添加到 数据库 中 不确定我是否需要数据库 或者是否可以通过 Tstringli
  • 无法使用 Robo3T 连接到 Mongo 副本集

    我在使用 RoboMongo 连接到 Mongo 集群时遇到问题 当我在指南针中使用相同的连接字符串时 它可以工作 但 Compass 社区版不像 Robomongo 那样灵活 无法连接到副本集 Employee UAT hhds6666
  • PHP DateTime::createFromFormat 返回错误的日期

    当尝试跑步时createFromFormat使用太平洋 奥克兰时区和格式字符串 F Y 尽管我提供了 2019 年 9 月 但返回的日期是 10 月 1 日 我尝试在 CLI 和 FPM 中的 PHP 7 3 9 和 7 2 22 上运行它
  • 为什么 WPF 吞咽 Window.Activated 的事件处理程序中引发的异常?

    简单的 WPF 应用程序 带有简单 空的内容Window其中我将事件处理程序连接到窗口Activated event public partial class MainWindow public MainWindow InitializeC
  • 如何从 Nexus 存储库请求工件的大小?

    我知道 Nexus 支持 REST 请求 您能告诉我如何根据 Nexus 从存储库请求某些工件的大小吗 谢谢 您有以下选项 使用工件内容 URI 的完整路径并添加参数describe info 例如 https repository son
  • 如何将要渲染的任意窗口重定向到内存中的后缓冲区?

    我正在尝试一个自行开发的应用程序托管框架 并且我想抽象输入 输出 以便我可以优雅地处理崩溃 Chrome 使用非常相似的模型 有什么方法可以获取任意窗口句柄 并说服它开始渲染到后缓冲区吗 或者我应该首先创建自己的窗口 然后将客户端应用程序重
  • 如何告诉 TypeScript 接口 T 比具有索引签名的类型 U 窄?

    我有一个函数可以验证 JSON 响应以确保它对应于给定的形状 以下是我的类型 定义了所有可能的 JSON 值 取自https github com microsoft TypeScript issues 1897 issuecomment
  • 如何更改操作栏上的文本

    目前它只显示应用程序的名称 我希望它显示自定义的内容并且对于我的应用程序中的每个屏幕都不同 例如 我的主屏幕可以在操作栏中显示 page1 而应用程序切换到的另一个活动可以在该屏幕操作栏中显示 page2 更新 最新的 ActionBar
  • Android 应用程序中的 VideoView 全屏

    我的应用程序中有一个视频视图 代码是这样的
  • 加载时将 Google 地图信息窗口居中

    我在将 InfoWindow 集中在页面加载时遇到问题 加载时 地图以标记为中心 这使 InfoWindow 离开屏幕 我正在使用地图容器的较短高度 现在 单击标记确实会将地图重新 置于信息窗口的中心 使其看起来与我想要的一模一样 在这种情