程序员经验分享-hwhale

如何在谷歌地图中设置缩放级别

2023-12-15

这是我编写的代码，用于通过提供纬度和经度向谷歌地图添加标记。问题是我得到了一个非常高缩放的谷歌地图。我尝试将缩放级别设置为 1，但这对高度缩放的地图没有影响。

 <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
     <script type="text/javascript">
        var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",new google.maps.Size(32, 32), new google.maps.Point(0, 0),new google.maps.Point(16, 32));
        var center = null;
        var map = null;
        var currentPopup;
        var bounds = new google.maps.LatLngBounds();
        function addMarker(lat, lng, info) {
            var pt = new google.maps.LatLng(lat, lng);
            bounds.extend(pt);
            var marker = new google.maps.Marker({
                position: pt,
                icon: icon,
                map: map
            });
            var popup = new google.maps.InfoWindow({
                content: info,
                maxWidth: 300
            });
            google.maps.event.addListener(marker, "click", function() {
                if (currentPopup != null) {
                    currentPopup.close();
                    currentPopup = null;
                }
                popup.open(map, marker);
                currentPopup = popup;
            });
            google.maps.event.addListener(popup, "closeclick", function() {
                map.panTo(center);
                currentPopup = null;
            });
        }
        function initMap() {
            map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(0, 0),
            zoom: 1,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
            },
            navigationControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.SMALL
            }
        });
        addMarker(27.703402,85.311668,'New Road');
        center = bounds.getCenter();
        map.fitBounds(bounds);

        }
</script>
</head>
<body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
<div id="map"></div>
</body>
</html>

在这种情况下如何降低缩放级别？


下面的代码正在缩放地图以适应指定的边界：

addMarker(27.703402,85.311668,'New Road');
center = bounds.getCenter();
map.fitBounds(bounds);

如果您只有 1 个标记并将其添加到边界，则会产生最接近的缩放：

function addMarker(lat, lng, info) {
  var pt = new google.maps.LatLng(lat, lng);
  bounds.extend(pt);
}

如果您跟踪已“添加”到地图（或扩展边界）的标记数量，则仅当该数字大于 1 时才能调用 fitBounds。我通常将标记推入一个数组（供以后使用）并测试该数组的长度。

如果您只有一个标记，请不要使用 fitBounds。称呼setCenter, setZoom与标记位置和您所需的缩放级别。

function addMarker(lat, lng, info) {
  var pt = new google.maps.LatLng(lat, lng);
  map.setCenter(pt);
  map.setZoom(your desired zoom);
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
<html>

<head>
  <script src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" type="text/javascript"></script>
  <script type="text/javascript">
    var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png", new google.maps.Size(32, 32), new google.maps.Point(0, 0), new google.maps.Point(16, 32));
    var center = null;
    var map = null;
    var currentPopup;
    var bounds = new google.maps.LatLngBounds();

    function addMarker(lat, lng, info) {
      var pt = new google.maps.LatLng(lat, lng);
      map.setCenter(pt);
      map.setZoom(5);
      var marker = new google.maps.Marker({
        position: pt,
        icon: icon,
        map: map
      });
      var popup = new google.maps.InfoWindow({
        content: info,
        maxWidth: 300
      });
      google.maps.event.addListener(marker, "click", function() {
        if (currentPopup != null) {
          currentPopup.close();
          currentPopup = null;
        }
        popup.open(map, marker);
        currentPopup = popup;
      });
      google.maps.event.addListener(popup, "closeclick", function() {
        map.panTo(center);
        currentPopup = null;
      });
    }

    function initMap() {
      map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(0, 0),
        zoom: 1,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        mapTypeControlOptions: {
          style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
        },
        navigationControl: true,
        navigationControlOptions: {
          style: google.maps.NavigationControlStyle.SMALL
        }
      });
      addMarker(27.703402, 85.311668, 'New Road');
      // center = bounds.getCenter();
      // map.fitBounds(bounds);

    }
  </script>
</head>

<body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
  <div id="map"></div>
</body>

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

javascript

googlemaps

googlemapsapi3

如何在谷歌地图中设置缩放级别 的相关文章

  • 如何使用 angular2 在客户端生成 rsa 密钥对？

    我需要知道如何使用 angular2 在客户端生成 rsa 密钥对 我需要生成私钥 公钥对并将私钥保存到数据库中 并希望在客户端内使用公钥 我怎样才能实现这个 我找到了这个https www npmjs com package genera

  • HTML5 Canvas - 在画布上绘图、保存上下文并稍后恢复

    要求 现在 在画布上绘制 然后点击 保存 存储画布状态 离线绘制 但不作为图像 稍后 打开画布并显示之前保存的绘图 然后继续再次绘制 对于绘图 我们通常使用如下代码 canvas document getElementById can ct

  • 范围滑块 javascript 以小时和分钟为单位

    我试图分别以小时和分钟为单位显示滑块的值 我对 JS 还很陌生 并且仍在尝试了解它是如何工作的 到目前为止 我所拥有的是一个工作滑块 其最大值为 1440 24 小时内的分钟 在 JS 中 我尝试将其划分为小时和分钟 并使用 innerHt

  • iPhone Web 应用程序禁用缓存

    我使用 PHP 构建了一个 iPhone 网络应用程序 主 也是唯一 页面包括苹果移动网络应用程序支持 and 苹果触摸全屏元标记 以便在添加到主屏幕后可以全屏运行 然而 似乎每次我从主屏幕启动应用程序时 都会使用页面的缓存版本而不是刷新页

  • EXT JS中有全局变量吗

    在 java 和 C 中 我们可以全局存储变量并从项目中的任何位置访问它的值 比如说 我在一个名为Residence我正在保存residenceNumber这是一个INT到一个名为的全局变量houseNumberGlobalVariable

  • 在 NodeJs 中使用 Jest 模拟 Http Post 请求

    我有一个使用本机 https request 使用 Azure Function 内的 Node Js 构建的外部 POST API 一切正常 现在我正在尝试构建单元测试用例 并对模拟 Request 方法感到震惊 回调响应具有 on 功能

  • 将 Babel 与单个输出文件和 ES6 模块一起使用

    这是我的 gulp 任务 将 ES6 代码编译成单个 ES5 文件 我使用类和模块 import export 在 ES6 中 gulp src paths scripts pipe sourcemaps init pipe babel p

  • 如何让机器人状态显示为“手机在线”

    我看到 NotSoBot 的状态为在线在移动 https i stack imgur com IiF4k png 有没有办法可以在discord js 中做到这一点 我知道这已经很旧了 但更简单的方法是将其添加到定义客户端 机器人的位置 c

  • JSON 解析错误 - JSON 中位置 1 处出现意外标记 o

    我需要获取一个 JSON 对象并记录标题控制台以实现自动完成功能 我的 json 的示例如下 title Example 1 url http www example1 com title Example 2 url http www ex

  • Array.from 的时间复杂度

    时间复杂度是多少Array from 例如 const set new Set set add car set add cat set add dog console log Array from set time complexity o

  • 如何在反应路由器的登录页面中隐藏导航栏

    我想隐藏登录页面中的导航栏 我确实做到了 但我在其他页面上看不到导航栏 此代码是 My App jsx 文件的一部分 我在 App 的状态中创造了历史 当路径名是 或 login 时 我会隐藏导航栏 有用 但随后我输入了 ID 和密码 然后

  • Django 管理中的自定义依赖下拉菜单

    我有一个按阶段模型的项目外键 我很难在 Django 管理页面中创建依赖的下拉列表 我想当用户从该项目的 项目下拉 阶段选择一个项目时 在第二个下拉菜单中显示 实现这一目标的最佳方法是什么 如果下拉列表根据其父级的值来过滤项目 那就太好了

  • Firebase 停止监听 onAuthStateChanged

    从版本 3 0 0 开始 我很难删除身份验证状态更改侦听器 要根据文档启动侦听器 firebase auth onAuthStateChanged function user handle it 但是 我在文档中找不到任何涉及删除身份验证状

  • up() 和 down() 与 Ext.getCmp()

    我很困惑我需要在 up down 和 Ext getCmp ID 之间使用哪一个作为 grep 对象 对我来说 定义对象的 ID 并通过 Ext getCmp ID 检索对象更容易 而且代码看起来更干净 例如 console log thi

  • Firefox 本地主机上的 Twilio 屏幕共享？

    目前 Firefox 中本地主机上的屏幕共享会引发以下错误 The request is not allowed by the user agent or the platform in the current context 这是我的代码

  • getCompatedStyle 类似于 IE8 的 javascript 函数

    我正在尝试在 Java GWT 代码中编写一个 Javascript 函数 该函数获取以下样式的值 direction fontFamily fontSize fontSizeAdjust fontStyle fontWeight lett

  • 未捕获的类型错误：无法分配给只读属性

    我正在尝试 Nicholas Zakas 所著的 Professional JavaScript for Web Developers 一书中的这个非常简单的示例 但我不知道我在这里做错了什么 我错过了一些非常简单的事情 但我被困住了 这是

  • 事件监听器如何/何时附加到 d3.js 中？

    我正在尝试制作一个 SVG 编辑器 长话短说 我需要将鼠标事件附加到

  • Jquery 脉动改变颜色或图像

    我正在尝试使用 jquery 脉动代码让 div 改变颜色 但我希望它从红色变为黑色 但我听说要做到这一点 你必须下载某个插件 所以我希望它脉动为图片 到目前为止我有这两个代码 img src 36 gif alt width 105 he

  • 将画布下载为 PNG 图像[重复]

    这个问题在这里已经有答案了 当我尝试将画布下载为 PNG 图像时 浏览器会在新页面中打开该图像 但不下载它 我的下载代码 btnScaricaEtichetta click function console log Download loc

随机推荐

  • 使用 Javascript 根据另一个下拉列表中选择的内容设置下拉值

    我有几个下拉菜单 其值很容易获得 如下所示 下拉菜单 1

  • Android 颜色选择器 [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心以获得指导 有谁知道我可以在我的应用程

  • 用户搜索屏幕的 Linq 动态查询

    我有一个数据库 它有一个 动态 的用户搜索屏幕 因为我可以根据搜索所基于的特定视图中可用的列动态添加其他搜索条件 并且它将允许用户使用它们立即地 以前我一直在该数据库中使用 nettiers 但现在我正在使用 RIA EntFramewor

  • 如何使用子进程模块杀死（或避免）僵尸进程

    当我使用 subprocess 模块从另一个 python 脚本中启动一个 python 脚本时 当子进程 完成 时会创建一个僵尸进程 除非我杀死我的父 python 进程 否则我无法杀死这个子进程 有没有办法在不杀死父进程的情况下杀死子进

  • 如何在Windows 7上安装ImageMagick（二）

    希望尽管问题标题相似 但这不是重复的问题 我已经安装了ImageMagick 6 7 5 6 Q16 windows dll exe I have php imagick dyn Q16 dll重命名为php imagick dll在 PH

  • 仅从 int 值中删除 csv 文件中的前导零

    我有这个 csv 文件 我试图从中删除前导零 但是使用我的代码来处理任何包含字母或特殊字符的数字 它会清空该值 我不希望这样 column1 column2 column3 column4 column5 column6 column7 c

  • Tkinter 中的文本输入

    Goal 我正在尝试编写一个基本文件 我可以将其导入到所有其他程序中 该程序将具有一个简单的函数 可以从用户那里获取输入然后返回它 Code 为此 我有以下代码 class takeInput object def init self re

  • 在服务中设置线程优先级没有任何效果[关闭]

    Closed 这个问题需要调试细节 目前不接受答案 在 Windows 服务中设置线程优先级之前是否需要一些额外的配置 在我的服务中 我有几个线程 每个线程都调用CreateProcess 启动外部应用程序的函数 我想调整线程 或进程 优先

  • 如何在android中放大/缩小ImageView（不使用Canvas）

    我正在开发一个应用程序 其中我必须在另一个图像 较大的图像 上旋转 拖放和放大 缩小图像 较小的图像 我完成了旋转和拖放 但无法实现放大 缩小 我知道如何在画布上执行此操作 但在我的应用程序中我没有使用画布 任何帮助将不胜感激 谢谢 达文德

  • PHP 对象的动态命名

    如何动态为 php 对象分配名称 例如 我如何将一个对象分配给一个 var 它是我用来创建对象的数据库行的 id 例如

  • 有没有人在windows平台上成功部署到heroku上？

    我一直在阅读各种有关如何从 Windows 在 Heroku 上部署 Rails 应用程序的教程 我尝试过安装 git heroku gem 生成 ssh 密钥并设置路径等等 我收到公钥错误 没有腻子 或致命的未找到身份验证 有腻子 在遇到

  • 使用 FlowLayout 时 JTextField 显示为狭缝...请解释

    有人可以向我解释一下为什么我每次都使用 FlowLayout 布局管理器吗 我的文本字段显示为狭缝 我已经被这个问题撞了一段时间了 我似乎无法弄清楚 找出为什么会出错 我有一种感觉 这是一件简单的事情 我一次又一次地忽视 所以如果 有人可以

  • sklearn 如何计算两个二进制输入的 roc 曲线下的面积？

    我注意到sklearn有以下功能 sklearn metrics roc auc score 它以 ground truth 和预测作为输入 例如 ground truth 1 1 0 0 0 prediction 1 1 0 0 0 sk

  • 地理围栏 - 点在多边形内部/外部

    我想确定一个多边形并实现一个算法来检查一个点是在多边形内部还是外部 有谁知道是否有任何类似算法的示例 如果我没记错的话 该算法是通过测试点画一条水平线 计算出有多少条多边形线相交才能到达您的点 如果答案很奇怪 那么你就在里面 如果答案是偶数

  • 使用长字符串调用 body.search() 时抛出 InvalidArgument 异常

    context document body search 正在扔一个InvalidArgument当要搜索的文本长度超过 255 个字符时 桌面版 Word 2016 中出现异常 Word Online 似乎也是如此 这是失败的代码 var

  • 找出两个 ICollection 集合是否包含相同对象的最快方法

    找出两个是否存在的最快方法是什么ICollection

  • 关闭 Twisted 中的非活动连接

    我正在使用 LineReceiver 协议运行 Twisted 服务器 有时客户端会默默地断开连接 因此 Twisted 会保持连接打开 而且由于除非有请求 否则服务器不会发送任何内容 因此永远不会出现 TCP 超时 换句话说 某些连接在服

  • 设置源数据时删除过渡

    当我将 Windows 8 应用商店应用程序中的默认模板用于项目网格时 在设置集合源时 我会得到一些漂亮的转换 我怎样才能删除这些转换 我正在对数据进行过滤 但我不喜欢每次数据更改时数据都会淡入 您可以通过覆盖 ItemContainerT

  • 如何保护文件免遭未经授权的下载

    我正在使用 PHP 和 MySQL 数据库创建一个会员网站 我有办法让用户使用他们的用户名和密码登录 所有非常标准的东西 我什至安装了系统 允许注册用户下载示例视频文件 这也很好用 然而问题是 任何能够弄清楚文件系统的人都可以直接下载这些文

  • 如何在谷歌地图中设置缩放级别

    这是我编写的代码 用于通过提供纬度和经度向谷歌地图添加标记 问题是我得到了一个非常高缩放的谷歌地图 我尝试将缩放级别设置为 1 但这对高度缩放的地图没有影响

热门标签