google-maps-api-3 相关问题

通过Google Maps JavaScript API版本3，您可以将Google地图的功能嵌入到您自己的网站中。版本3为移动设备提供了极大改进的支持。在Maps API Google Group中提出非编程和许可问题（请参阅完整说明以获取链接）

在 Google 地图 API 上重新加载标记

这是我的代码（大部分代码来自Google的API页面）。 var 海滩 = [ ['邦迪海滩', -12.890542, 120.274856, 4], ['库吉海滩', -12.923036, 520.259052, 5], ['</desc> <question vote="12"> <p>这是我的代码（大部分代码来自 Google 的 API 页面）。</p> <pre><code><script> var beaches = [ ['Bondi Beach', -12.890542, 120.274856, 4], ['Coogee Beach', -12.923036, 520.259052, 5], ['Cronulla Beach', -12.028249, 1221.157507, 3], ['Manly Beach', -12.80010128657071, 1121.28747820854187, 2], ['Maroubra Beach', -33.950198, 121.259302, 1] ]; function setMarkers(map, locations) { for (var i = 0; i < locations.length; i++) { var beach = locations[i]; var myLatLng = new google.maps.LatLng(beach[1], beach[2]); var marker = new google.maps.Marker({ position: myLatLng, map: map, title: beach[0], zIndex: beach[3] }); } } function initialize() { var mapOptions = { zoom: 3, center: new google.maps.LatLng(38.77417, -9.13417), mapTypeId: google.maps.MapTypeId.SATELLITE } var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); setMarkers(map, beaches); } google.maps.event.addDomListener(window, 'load', initialize); setInterval(function() { setMarkers(map, beaches); }, 5000); </script> </code></pre> <p>我只想重新加载标记。我尝试使用初始化函数重新加载地图，但它不起作用。然后我尝试使用 setMarkers 函数重新加载，但仍然没有成功......</p> <p>感谢您的帮助。</p> </question> <answer tick="true" vote="42"> <p>你应该做的几件事/我对你的原始代码进行了更改的事情：</p> <ol> <li>为标记使用有效的纬度/经度坐标（例如 1121.28747820854187 不是有效的经度）</li> <li>为您的地图创建一个全局变量（更容易在脚本中引用）</li> <li>创建一个数组来保存标记</li> <li>我为您的标记添加了标记动画 <pre><code>animation: google.maps.Animation.DROP,</code></pre>，以便您可以看到它们何时重新加载，以及用于调用重新加载函数的 <em>重新加载标记</em> 按钮。</li> </ol> <p>基本上你想做的是：</p> <ol> <li>在 <pre><code>setMarkers</code></pre> 函数中创建每个标记</li> <li>将每个标记推入 <pre><code>markers</code></pre> 数组</li> <li>当<em>重新加载</em>标记时，循环遍历标记数组并对每个标记调用<pre><code>setMap(null)</code></pre>以将其从地图中删除</li> <li>完成后，再次调用 <pre><code>setMarkers</code></pre> 重新绘制标记</li> </ol> <p><strong>更新代码：</strong></p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code>let map; let markers = []; // Create a marker array to hold your markers const beaches = [ ['Bondi Beach', 10, 10, 4], ['Coogee Beach', 10, 11, 5], ['Cronulla Beach', 10, 12, 3], ['Manly Beach', 10, 13, 2], ['Maroubra Beach', 10, 14, 1] ]; function setMarkers(locations) { for (let i = 0; i < locations.length; i++) { let beach = locations[i]; let myLatLng = new google.maps.LatLng(beach[1], beach[2]); const marker = new google.maps.Marker({ position: myLatLng, map: map, animation: google.maps.Animation.DROP, title: beach[0], zIndex: beach[3] }); // Push marker to markers array markers.push(marker); } } function reloadMarkers() { // Loop through markers and set map to null for each for (let i = 0; i < markers.length; i++) { markers[i].setMap(null); } // Reset the markers array markers = []; // Call set markers to re-add markers setMarkers(beaches); } async function initMap() { // Request libraries when needed, not in the script tag. const { Map } = await google.maps.importLibrary("maps"); map = new Map(document.getElementById("map-canvas"), { zoom: 5, center: new google.maps.LatLng(10, 12), mapTypeId: google.maps.MapTypeId.SATELLITE }); setMarkers(beaches); // Bind event listener on button to reload markers document.getElementById('reloadMarkers').addEventListener('click', reloadMarkers); } initMap();</code></pre> <pre><code>#map-canvas { height: 140px; }</code></pre> <pre><code><div id="map-canvas"></div> <button id="reloadMarkers">Reload</button> <script> (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({ key: "AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk", v: "weekly", // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). // Add other bootstrap parameters as needed, using camel case. }); </script></code></pre> </div> </div> <p></p> <p><kbd><a href="http://jsfiddle.net/upsidown/p646xmcr/" rel="nofollow noreferrer">JSFiddle 演示</a></kbd></p> </answer> <answer tick="false" vote="3"> <p>要重新加载标记，请在创建时将它们推送到数组中。</p> <p>然后创建一个函数，在其中迭代数组，将标记映射设置为空。之后，擦除阵列。</p> <p><strong>编辑：</strong>我假设，您将在 PHP 上返回具有以下结构的 JSON</p> <pre><code>{ beaches: [ [ "Bondi Beach", -12.890542, 120.274856, 4 ], [ "Other Beach", -12.890542, 120.274856, 5 ] ] } </code></pre> <p>我还假设你会使用<a href="http://jquery.com/" rel="nofollow">jQuery</a>（只是为了简化ajax调用和json迭代）</p> <pre><code><script> var arrMarkers = []; var beaches = [ ['Bondi Beach', -12.890542, 120.274856, 4], ['Coogee Beach', -12.923036, 520.259052, 5], ['Cronulla Beach', -12.028249, 1221.157507, 3], ['Manly Beach', -12.80010128657071, 1121.28747820854187, 2], ['Maroubra Beach', -33.950198, 121.259302, 1] ]; function setMarkers(map, locations) { for (var i = 0; i < locations.length; i++) { var beach = locations[i]; var myLatLng = new google.maps.LatLng(beach[1], beach[2]); var marker = new google.maps.Marker({ position: myLatLng, map: map, title: beach[0], zIndex: beach[3] }); arrMarkers.push(marker); } } function initialize() { var mapOptions = { zoom: 3, center: new google.maps.LatLng(38.77417, -9.13417), mapTypeId: google.maps.MapTypeId.SATELLITE } var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); setMarkers(map, beaches); } function removeMarkers(){ var i; for(i=0;i<arrMarkers.length;i++){ arrMarkers[i].setMap(null); } arrMarkers = []; } google.maps.event.addDomListener(window, 'load', initialize); setInterval(function() { updateTheMarkers(); }, 5000); function updateTheMarkers(){ $.ajax({ type: "GET", url: "/yourphp.php", success: function (data) { //We remove the old markers removeMarkers(); var jsonObj = $.parseJSON(data), i; beaches =[];//Erasing the beaches array //Adding the new ones for(i=0;i < jsonObj.beaches.length; i++) { beaches.push(jsonObj.beaches[i]); } //Adding them to the map setMarkers(map, beaches); } }); } </script> </code></pre> <p>基本上，现在，每 5 秒你的 javascript 就会向你的 php 发出一个 ajax 请求，你的 php 将返回一个包含新海滩的更新后的 json，你将删除旧的标记，用新的位置填充数组并生成新的标记。 </p> </answer> <answer tick="false" vote="0"> <p>这可能不是最初的疑问，但要清除地图的标记和其他组件，请在加载地图及其组件之前放置：</p> <pre><code>map.clear (); </code></pre> </answer> <answer tick="false" vote="-1"> <p>即使在将新位置设置为标记后最初将其设置为不可见：</p> <pre><code>markerLcl.setPosition(mLatLng) </code></pre> <p>通过以下方式在新位置重新绘制：</p> <pre><code> markerLcl.setMap(null) markerLcl.setMap(mMap) </code></pre> </answer> </body></html>

javascript google-maps google-maps-api-3

回答 0 投票 0

如何更改 Google 地图信息窗口的位置

如标题所示，如何更改如上图所示的信息窗口的位置？我已按照 Google 的指示进行操作。现在我想改变 infowindows 的位置但不知道...

google-maps google-maps-api-3 google-maps-markers

回答 1 投票 0

geojson多多边形数据的中心和拟合边界

我正在尝试在 google.maps.Map 上居中并拟合多个 geojson 多边形要素的边界。请参阅这个非 geojson 小提琴，重新创建我想要的效果。有没有简单的谷歌地图A...

google-maps-api-3

回答 2 投票 0

如何在 Angular 8 的 google 地图的 infowindow 中绑定点击功能？

我试图从谷歌地图的信息窗口中的按钮绑定点击功能，但该功能没有触发。导出类 MapComponent 实现 OnInit、OnDestroy { @输入（）

angular typescript google-maps-api-3 event-binding

回答 1 投票 0

Google 地图标记 DROP 动画不一致

我在 Angular 10 中使用谷歌地图 API，我发现切换 DROP 动画存在一些不一致之处。官方文档上的 JSFiddle 有一个切换弹跳动画的演示。

javascript typescript google-maps google-maps-api-3 google-maps-markers

回答 2 投票 0

Google 地图路线使用 1-2-3 而不是 A-B-C

我在 Google 地图上使用 Google 地图 API。问题是，它向我显示了整个路径中的几个站点，将它们标记为 A-B-C-D...Z，但我需要将其更改为 1-2-3-4-..99，这是我...

javascript google-maps google-maps-api-3

回答 2 投票 0

点击地图 POI 时，Google Map Api 要素层点击事件不会被触发

我的代码如下地图 = 新 google.maps.Map(document.getElementById('地图'), { mapTypeId：window.google.maps.MapTypeId.ROADMAP，禁用默认UI：true，

javascript google-maps google-maps-api-3 event-handling javascript-events

回答 1 投票 0

Google 地图和 Richfaces 3.3.3（prototype.js 1.6.0.3）可能不兼容

我有一个基于 RichFaces 3.3.3 的 Web 应用程序，它使用 Google 地图（maps-api v3），直到最近都运行良好。最近无法绘制地图的用户控件。地图画得很好但是...

google-maps google-maps-api-3 richfaces prototypejs

回答 5 投票 0

Google Maps Places API 返回不一致的结果（以及某种解决方案）

对于遇到类似问题的人来说，这部分是问题，部分是解决方案。使用Google Maps API的附近搜索时，增加搜索半径有时不会增加数量...

kotlin google-maps google-maps-api-3

回答 1 投票 0

带有 Google 地图 API 的地图滑动工具

我正在尝试构建像这样的并排地图滑动工具。我的用户界面可以正常工作。我需要有关更改地图图层的帮助。我通过这个函数从 Earth Engine 获取地图 id 和地图令牌...

layout google-maps-api-3 swipe google-earth-engine

回答 1 投票 0

数据层：动态样式

我正在使用以下函数在地图上设置折线样式： CountyLayer.addListener('点击', 函数(事件) { CountyLayer.overrideStyle(event.feature, {StrokeWeight: 8}); }); 现在我想删除

google-maps-api-3 styling

回答 1 投票 0

相机位置搜索错误：此API密钥无权使用此服务或API

我正在使用 flutter 中的谷歌地图地点选择器插件从地图中选择位置/地址 https://pub.dev/packages/google_maps_place_picker_mb 但是当我精确定位选择器时，它会返回以下内容...

flutter google-maps google-maps-api-3

回答 1 投票 0

Google Maps API - 将任意数据添加到数据层中的点

var schoolLayer = new google.maps.Data(); schoolLayer.setMap(地图); 让 latLng = new google.maps.LatLng(coords1, coords2); 让学校 = new google.maps.Data.Point(latLng); schoolLayer.add({几何:

google-maps google-maps-api-3

回答 1 投票 0

输入更改时地图组件重新加载

我正在尝试将我的 NextJs 项目与 Google 地图集成，然后我遇到了一个问题，当我使用地图选择表单内的位置，然后编辑输入时，地图只是刷新并删除。 .

google-maps google-maps-api-3 next.js13

回答 1 投票 0

在模块 jetified-mapmyindia-android-gestures-0.0.1-runtime 中发现重复的类 com.mapmyindia.sdk.gestures.StandardScaleGestureDetector$1

以前我的项目正在开发mappls_gl包，但它不提供像mapmyindia_gl这样的最新功能，相反，两者都是官方的，并且每件事都非常相似，但是...

google-maps google-maps-api-3 maps flutter-dependencies mapmyindia-api

回答 1 投票 0

Google 地图 - 绘制多个纬度经度对之间的线条和距离（直线距离）

我希望通过多个纬度经度对在地图上“直线飞行”绘制一条路线。我还需要计算总距离（最好是点之间的距离）。我发现了...