正文 

当前位置： 首页 > 源码 >

如何使用 javascript 和谷歌地图更改地图中的位置？

     2023-03-28     14

关键词：

【中文标题】如何使用 javascript 和谷歌地图更改地图中的位置？【英文标题】：How can I change the location in a map using javascript and google maps? 【发布时间】：2015-09-11 07:16:15 【问题描述】：

我正在尝试使用 each 循环更改地图的中心以前往不同的地方，但是当我执行代码时，地图不会显示所有位置，而是地图显示第一个和最后一个位置，我将如果你能帮我解决这个问题，感激不尽。

这是代码：

    var a = new google.maps.LatLng(8.8013, -74.72538);
    var b = new google.maps.LatLng(1.0619, -73.2558);
    var c = new google.maps.LatLng(12.5872, -81.7025);
    var d = new google.maps.LatLng(3.2719, -73.0877);

    var locations = new Array(a, b, c, d);
    var mapProp = 
        center: new google.maps.LatLng(5.0619, -70.2558),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    ;
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

    function initialize() 
        goToLocations(locations);
    
    google.maps.event.addDomListener(window, 'load', initialize);   

    function goToLocations(locations) 
        $.each(locations, function (index, location) 
            goToLocation(location);
        );
    

    function goToLocation(location) 
      // here I can not see all locations 
        window.setTimeout(map.setCenter(location), 5000);        
    
<html>  

  <body>
    
    <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript">       </script>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    
    <h1>Map that go to different locations </h1>
    <div id="googleMap" style="width: 500px; height: 380px"></div>
    
  </body>
  
</html>

【问题讨论】：

【参考方案1】：

您的function 工作正常，它实际上显示了您在array 上拥有的所有城市。但是，我们无法看到它。 function 执行速度如此之快，以至于我们只能看到第一个和最后一个。

尝试将Timeout 放入$.each 函数中，它会起作用：

$.each(locations, function (index, location) 
   window.setTimeout(function()  
      goToLocation(location);
   , 1000);
);

【讨论】：

谢谢，但我尝试在$.each 中添加timeout，但问题仍然存在

如何使用 mongoid、rails 和谷歌地图搜索“附近的用户”

】如何使用mongoid、rails和谷歌地图搜索“附近的用户”【英文标题】：Howtosearchfor"NearbyUsers"usingmongoid,rails,andgooglemaps【发布时间】：2011-06-1603:43:59【问题描述】：我有一个模型User使用MongoDB存储纬度和经度数据。我正在使... 查看详情

Xamarin 和谷歌地图上的不同距离

...istance()方法计算时，我在Google地图上获得了不同的距离。如何计算Xamarin中的行驶距离？有什么方法可以用来计算c#/Xamarin中的地图距离吗？以下代码计算两个位置之间的距离。但这 查看详情

谷歌地图和谷歌位置自动完成冲突

...：正在显示谷歌地图，其下方有一个文本输入，其中正在使用谷歌的地点自动完成功能。我在显示地图或自动完成功能时遇到问题，但无法让两者一起工作:(jsfiddle在这里：http://jsfiddle.net/HaDbR/11/那里的地图工作正常， 查看详情

Javascript，更改谷歌地图标记颜色

】Javascript，更改谷歌地图标记颜色【英文标题】：Javascript,Changegooglemapmarkercolor【发布时间】：2012-06-1907:33:41【问题描述】：我能否知道一种通过Javascript更改Google地图标记颜色的方法。我是这方面的新手，非常感谢您提供任何帮... 查看详情

Laravel 和谷歌地图：foreach 纬度/经度显示标记或地图

...位置，我都想要一张新地图（或者更好的是新标记），它使用表格位置中的纬度和经度在地图上显示一个城市。控制器的索引操作：publicf 查看详情

更改后如何将 Google 地图标记设置回默认图标？

】更改后如何将Google地图标记设置回默认图标？【英文标题】：HowcanIsetaGoogleMapMarkerbacktothedefaulticonafterchangingit?【发布时间】：2017-07-2806:08:25【问题描述】：我在我正在开发的安卓应用程序中使用android-maps-utils库和谷歌地图，我... 查看详情

React.memo 不适用于功能组件和谷歌地图

...：我正在尝试在React应用程序中插入谷歌地图。我宁愿不使用非官方的库（我发现那些缺少文档的库），而且我已经设法插入了地图。我的问题是每次父组件的状态改变时都会重新渲染地图；尽管改变的值与地图需要的完全 查看详情

百度地图和谷歌地图的选择

p.p1margin:0.0px0.0px0.0px0.0px;font:12.0px"PingFangSC"最近手上接到一个需求：国外的域名访问，显示谷歌地图国内的域名访问，显示百度地图切换中英文的时候，中文显示百度地图，英文能显示谷歌地图就显示谷歌地图不能显示就显示百... 查看详情

Radius 搜索 PHP、MYSQL 和谷歌地图

...leMaps【发布时间】：2012-05-2511:08:41【问题描述】：我正在使用某个位置的纬度和经度搜索数据库。我想检索某个半径内的所有位置。然后我将返回的结果编码为JSON并使用ajax检索数据，但是我得到一个未定义的错误，这意味着没... 查看详情

谷歌地图 API 变化？

...今天凌晨，一切都运行良好，但地图突然停止加载。没有JavaScript错误，打开的图层和谷歌仍在初始化，数据点仍在各自的位置绘制，但地图没有加载。以下是我正在使用的资源：<s 查看详情

我们可以用 gps 和谷歌地图提取信息的深度

...发布时间】：2016-05-2122:38:42【问题描述】：是否可以通过使用googlemaps和gps获取所有这些信息？当前位置的地址地点名称（餐厅、医院、加油站）与这些地点相关的电话号码【问题讨论】：【参考方案1】：我自己找出答案。如果... 查看详情

htmldirecciones和谷歌地图。利用paralocalizartunegocio。(代码片段)

查看详情

应用程序和谷歌地图中的距离之间的CLLocation差异

...自Google地图：距离=1.5公里（大约）（正确）从应用程序使用CLLocation：距离=0.83公里（大约）（不正确）位置坐标为：当前位置：19.017 查看详情

如何使用javascript在谷歌地图中的多个标记之间绘制路线图

】如何使用javascript在谷歌地图中的多个标记之间绘制路线图【英文标题】：HowtodrawRoutemapbetweenmultiplemarkersingooglemapsusingjavascript【发布时间】：2018-01-0217:24:06【问题描述】：我使用谷歌地图API开发了地图。标记通过适当的标签可... 查看详情

GPS 追踪器与 jQuery 移动、PhoneGap 和谷歌地图

...leMaps【发布时间】：2014-02-1704:30:34【问题描述】：我已经使用Android的PhoneGap开发了一个jQueryMobile应用程序。现在，我需要一个GPS追踪器。我想获取用户的位置并将其与数据库中的一些坐标进行比较。我想知道，这种方法是否可行... 查看详情

如何使用 JavaScript 制作用户当前位置的谷歌地图

】如何使用JavaScript制作用户当前位置的谷歌地图【英文标题】：HowcanImakeagooglemapwithuser\'scurrentplacewithJavaScript【发布时间】：2012-08-0213:07:36【问题描述】：我检查了我的问题的解决方案，但我得到的只是谷歌分配给静态经度和纬... 查看详情

mapxtreme如何加载在线地图如高德，谷歌之类的

mapxtreme如何加载在线地图如高德，谷歌之类的，最好有源码的，求问参考技术A如果你仅仅是使用地图在国内导航，那么就使用高德地图吧。因为国内根本就不准使用谷歌的东西。你下载了谷歌地图也是无法使用的高德和谷歌地... 查看详情

没有地图的反应和谷歌方向API

】没有地图的反应和谷歌方向API【英文标题】：reactandgoogleDirectionsAPIwithoutmap【发布时间】：2020-10-2907:33:31【问题描述】：我需要在我的内部应用程序中来自.route()的结果，而不是进入任何地图。我需要起点和终点之间的持续时间... 查看详情