隐藏折线的正确方法?

2024-04-23

我有一个在地图上显示折线的函数,这部分正在工作,现在我想实现一个隐藏折线的函数,但我找不到我的错误,提前致谢。

function cargaMapaCYL(mapa, varControl){
    var limite = null; 
    limite = [
        new google.maps.LatLng(42.49956716,-7.019005501),
        new google.maps.LatLng(42.49947126,-7.029286373),
        new google.maps.LatLng(42.50904062,-7.049299123),
        new google.maps.LatLng(42.50722622,-7.069103626),
        new google.maps.LatLng(42.50452387,-7.000150672),
        new google.maps.LatLng(42.49348015,-6.983058917),
        new google.maps.LatLng(42.49843269,-6.971666546),
        new google.maps.LatLng(42.51765791,-6.956909023),
        new google.maps.LatLng(42.52010069,-6.927429186),
        new google.maps.LatLng(42.50992238,-6.914231493),
        new google.maps.LatLng(42.50096695,-6.879679821),
        new google.maps.LatLng(42.48775868,-6.857775832),
        new google.maps.LatLng(43.23907504,-3.293216584)], "#000000", 5);

    var contorno= new google.maps.Polyline({
        path: limite,
        strokeColor: "#000000",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    if(varControl==true){
        contorno.setMap(mapa);
    }
    if(varControl==false){
        contorno.setMap(null);
    }
}

您只需创建折线一次。将其放入全局 var contorno = ... 然后您可以使用 setVisible(boolean) 方法创建切换函数。

 if(contorno.getVisible()){
      contorno.setVisible(false);
   else{
      contorno.setVisible(true);
   }
 // or
contorno.getVisible() ? contorno.setVisible(false) : contorno.setVisible(true);

Blow 是一个在 3 秒后隐藏路径的示例。

/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<script>
// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: 'terrain'
  });

  var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
  
  setTimeout(function() {
  	alert('hide path');
    flightPath.setVisible(false);
  }, 3000);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

隐藏折线的正确方法? 的相关文章

  • Google 地方信息自动完成功能不适用于动态生成的输入元素

    自动完成功能在多个静态输入字段上完美运行 但是 当我通过按钮添加输入字段时 自动完成功能不适用于这些输入字段 也许问题出在闭包上 但我不确定 因为我的 JavaScript 很弱 谁能帮我 这是代码
  • 通过单击按钮和带有 jQ​​uery 的单独 JS 文件来触发 Google 地图标记上的单击事件

    我正在使用 Google Map API v3 和 jQuery 1 11 0 我在以下分区中有一个谷歌地图 div class map div div 地图有4个标记 它的点击事件是通过这种方式在JS中添加的 google maps ev
  • Google 地图 v3 地理编码服务器端

    我正在使用 ASP NET MVC 3 和 Google 地图 v3 我想在一个动作中进行地理编码 即将有效地址传递给 Google 并获取纬度和经度 我见过的所有关于地理编码的在线示例都涉及客户端地理编码 您将如何使用 C 在操作中执行此
  • 在 Google Maps API v3 中获取折线的边界

    有没有简单的方法可以使用 Google Maps API v3 查找折线的边界框 我正在开发一个项目 在该项目中 我需要在地图中添加和删除数据时更新边界 只需执行 bd extend point 即可非常简单 其中 bd 是绑定对象 poi
  • 将 HTML 类/ID 添加到 Google 地图标记 (API V3)

    如何向 Google Maps API V3 标记添加类或 ID 我希望能够使用 jQuery 访问标记 编辑 嗨 clarkf 感谢您的回复 使用 Firebug 在检查我的地图时我无法看到这些类 但我确实注意到有两个 div 一种用于图
  • 地理编码 API 的准确度如何?什么是最准确的?

    我正在使用具有地理编码功能的谷歌地图 API 创建一个应用程序 显然 我想使用最准确的api 我给应用程序一个地址 我需要在地图上找到它 但我只要找到纬度和经度就可以了 然后我可以使用它将其合并到我选择的任何地图 api 中 根据您的经验
  • 多边形来自折线?

    我正在尝试自动从折线创建多边形 到目前为止 我一直在正确计算折线每个部分的外推边 条件 基线和边之间的距离是常数 如何从基点 红色点 计算边 蓝色点 的角点 这是我在 Qt 中的代码 这对我来说很好用 QPolygonF projectPL
  • 如何在谷歌同意屏幕中添加徽标?

    我已经在谷歌开发者控制台中创建了项目 现在我想在同意屏幕中设置我的徽标 我的计算机上有徽标 同意屏幕上的徽标字段需要 URL 有什么方法可以在我的计算机上的同意屏幕上设置徽标吗 我还尝试在谷歌驱动器上上传图像并将其共享链接放在徽标字段中 您
  • Safari 在 div 中使用 Google 地图打破边框半径

    对我来说关于 Stack 的第一个问题 我已经完成了我的作业并发现了类似这个主题的内容 在 webkit 浏览器中 v3 谷歌地图不尊重容器的边框半径 有人有解决方法吗 https stackoverflow com questions 1
  • 光标在 Google 地图应用程序中消失

    这确实很奇怪 使用 API v3 创建 Google 地图应用程序后 有时当我将光标悬停在地图上时 鼠标光标会消失 我需要与地图之外的几个控件进行交互 当我点击其中一个并且地图失去焦点后 问题就显现出来了 这事发生在别人身上过吗 我尝试将焦
  • Google 地图 v3 API - 自动完成(地址)

    尝试让我的谷歌地图应用程序自动完成工作 这是当前的代码 HTML
  • 带有 Google iframe 链接的 Google 静态地图图像

    我正在尝试显示一个谷歌静态地图 单击该地图时 将打开一个更大的 iframe 用户可以在其中平移 缩放等 JSF 在这里 http jsfiddle net thong Q4FE7 代码如下 div a class various fanc
  • Google Maps API V3 关闭信息框

    我有一个 Google 地图版本 3 但我无法完全按照我想要的方式工作 当地图打开时 页面上有几个标记 单击或悬停在标记上会打开一个带有酒店名称的小信息框 单击另一个标记将关闭第一个信息框并在新标记上打开一个新信息框 问题在于关闭最后一个信
  • 如何使事件 DOM 侦听器适应 Google Maps JavaScript API v3.35

    我曾经使用以下代码来捕获用户的 Enter 键事件 如果用户没有选择其中任何一个 即没有标记为 pac 的 pac item 则自动从自动完成结果 pac items 中选择第一个结果 项目选择 var input document get
  • 导致链接平移并打开地图中的标记

    JSFiddle http jsfiddle net megatimes NVDLf 7 http jsfiddle net megatimes NVDLf 7 我有一张地图 它从数组创建多个标记 地图下方是一些链接 单击这些链接时 我想让
  • 来自 geoJSON 的 Google 地图航点

    我想从 geoJSON 文件加载行程 目前来说 它是有效的 但只有两点 但我需要添加 4 或 5 个航路点 我的代码只读取前两个点并将它们设置为起点和目的地 这是我的代码 google maps event addListener map
  • google.maps.Geocoder.geocode() Geometry.location lat/lng 属性名称经常更改

    我有一个应用程序 我正在使用 Google Javascript 地理编码 API 来获取地址的纬度 经度 代码是这样的 geocoder new google maps Geocoder geocoder geocode address
  • 如何在 Google Maps API 中指示语言?

    就像你访问一样maps google com tw or maps google co kr or maps google co jp 您可以看到每个国家 地区都显示自己的语言 我可以在 Google 地图 API 中使用任何属性来动态设置
  • Google Map v3 地图加载事件[重复]

    这个问题在这里已经有答案了 是否有任何侦听器来处理完全加载的地图 就我而言 我需要从地图获取边界 所以我这样做了 google maps event addListener this map bounds changed this mapL
  • Google 地图 InfoBubble PixelOffset(从标记上方的默认位置移动)

    我正在尝试实现一个自定义 infoBubble 它的框打开到标记的侧面 而不是顶部的默认位置 事实证明这比预期的要困难 使用普通的infoWindow 您可以使用pixelOffset 请参阅此处文档 https developers go

随机推荐

  • Mat-table 排序演示不起作用

    我正在尝试获取mat table排序在本地工作 虽然我可以让数据按预期显示 但单击标题行不会像在线示例那样进行排序 根本没有发生任何事情 我正在尝试让这个演示在本地运行 https material angular io component
  • 仅当通过 AWS CLI 调用 Lambda 时,目标才有效

    我有一个 hello world 测试 Lambda 配置为 触发 API网关 目的地 亚马逊 SQS 一个队列表示成功 另一个队列表示失败 import json def lambda handler event context prin
  • 如何在flyway创建的postgresql jdbc连接上设置时区?

    我有一个 postgresql 数据库 我使用 Flyway 将脚本部署到该数据库 我使用 Maven Flyway 插件启动针对目标数据库的数据库构建 在该构建中 我有一些脚本可以执行以下操作 create table my table
  • 在 OpenGL 中移动相机时出现故障

    我正在为 iPhone 编写一个基于图块的游戏引擎 除了以下故障之外 它基本上可以正常工作 基本上 相机将始终将玩家保持在屏幕中央 并且它会移动以正确跟随玩家并在静止时正确绘制所有内容 然而 当玩家移动时 玩家行走的表面瓷砖会出现故障 如下
  • Rails 嵌套单一资源路由

    我有一个简单的用户模型 带有单个嵌套的配置文件资源 因此在我的routes rb 中我有 resources users do resource profile only gt edit update show end 这会生成预期的路线
  • Octave/Matlab:向向量添加新元素

    有一个向量x我必须添加一个元素 newElem 有什么区别吗 x end 1 newElem and x x newElem x end 1 newElem更稳健一些 x x newElem 仅当x是行向量 如果它是列向量x x newEl
  • 删除方法二叉搜索树

    我正在尝试为我一直在研究的 BST 结构实现一个删除方法 下面是查找 插入和删除方法的代码 public class BST BSTNode root new BSTNode root public void insert BSTNode
  • 如何在 android dexDebug 或 dexRelease 任务之后执行 gradle 任务

    我想在 android 构建过程中在 dexRelease 或 dexDebug 任务之后运行 Gradle 任务来执行一些 shell 脚本 我尝试过以下方法 task taskAfterDex type Exec workingDir
  • AVD 硬件按钮未启用

    I just downloaded and installed the new Android SDK When I start the emulator on the emulator screen it says Hardward Bu
  • 广播接收器在 android oreo 中不工作

    我的广播接收器无法在奥利奥上工作 但它在奥利奥下工作 工作正常 我对此进行了很多搜索 但找不到合适的解决方案 有没有人遇到同样的问题 这是我的关于已实现广播的服务的代码 请建议我如何在奥利奥中工作 这是班级 public int onSta
  • Android开发-SQLite存储float

    当我存储浮点值 widt SQLiteDatabase insert 时 存储的值将与原始值不同 请参见下文 我有一个数据库宽度 db execSQL CREATE TABLE IF NOT EXISTS info values BaseC
  • 如何防止 Angular 2 站点上的浏览器缓存?

    我们目前正在开发一个定期更新的新项目 我们的一位客户每天都在使用该项目 这个项目是使用 Angular 2 开发的 我们面临着缓存问题 也就是说我们的客户在他们的机器上看不到最新的更改 主要是 js 文件的 html css 文件似乎得到了
  • 在 VsCode 中更新笔记本上的环境变量

    我正在使用 VsCode 上的笔记本和 env 文件开发一个 Python 项目 我在尝试刷新笔记本中的环境变量时遇到问题 我找到了一种方法 但非常棘手 我的项目 env 文件包含 MY VAR HELLO ALICE 包含一个单元格的 t
  • 如何测量脚本的执行时间? [复制]

    这个问题在这里已经有答案了 如何测量脚本从开始运行到结束所需的时间 start timing CODE end timing EDIT 2011 年 1 月 这是最佳的可用解决方案 其他解决方案 例如performance now 现在应该
  • Android TimePicker AM/PM 按钮不调用 onTimeChanged

    我在应用程序中实现 TimePicker 时遇到一些问题 该应用程序允许用户在插入数据库记录之前更改数据库记录的时间 问题是 当按下 AM PM 按钮时 不会调用 onTimeChanged View int int 方法 然而 每当我更改
  • Oracle SQL Developer:如何查看引用游标的结果?

    如果我有一个返回查询引用游标的函数 我如何在 SQL Developer 中查看其结果集 Toad 有一个特殊的选项卡 用于查看参考光标的结果 这是我想要找到的功能 SET SERVEROUTPUT ON VARIABLE X REFCUR
  • 为什么 tSQLt 测试在 Visual Studio 测试资源管理器中会通过,而它应该失败?

    我正在编写一些 tSQLt 测试并通过 Visual Studio 的测试资源管理器运行它们tSQLt 测试适配器 https the agilesql club blogs Ed Elliott tSQLt Visual Studio T
  • Heroku Gem 安装后无法使用

    我正在尝试让 heroku 在 Ubuntu 9 10 上运行 I typed sudo gem install heroku 一切正常 但是当我去跑步时 heroku list I get heroku 找不到命令 run 宝石环保看看哪
  • 如何让 git 在 vi​​m 中显示更改,就像 hg 使用 hgeditor 脚本那样?

    Mercurial 的一个有趣的功能是能够查看将在 vim split 中提交的更改 请参阅VIM 中的 DiffsInCommitMessage https www mercurial scm org wiki DiffsInCommit
  • 隐藏折线的正确方法?

    我有一个在地图上显示折线的函数 这部分正在工作 现在我想实现一个隐藏折线的函数 但我找不到我的错误 提前致谢 function cargaMapaCYL mapa varControl var limite null limite new