通过Google Maps JavaScript API版本3，您可以将Google地图的功能嵌入到您自己的网站中。版本3为移动设备提供了极大改进的支持。在Maps API Google Group中提出非编程和许可问题（请参阅完整说明以获取链接）
我有一个自定义叠加类（ImageOverlay），它继承自google.maps.OverlayView。我希望它能够响应 Google 地图点击事件（不仅仅是 DOM 点击事件），但只需使用 addListener d...
我正在开发一个 JavaScript 项目，旨在创建一条路线，同时考虑电动汽车充电站的停靠点。路线准备好后，用户可以单击重定向按钮...
我们公司一直在我们的网站上使用Google Maps API，以提供商店定位功能。此功能在我们的网站上停止运行。我想恢复功能，但是...
如何向 Google Maps API 中的 AdvancedMarkerElement 添加自定义属性
我正在将地图标记迁移到 AdvancedMarkerElement，并且我想向 AdvancedMarkerElement 添加自定义属性。 像这样： 新的高级标记元素（{ 地图：这个.map， 位置：数据.位置，
如何在谷歌地图API中向AdvancedMarkerElement添加自定义属性
我正在将地图标记迁移到 AdvancedMarkerElement 和 我想向 AdvancedMarkerElement 添加自定义属性 像这样： 新的高级标记元素（{ 地图：这个.map， 位置：数据.位置，
如图所示，我的标签“150”严格位于中心。但我想上升一点。这可能吗？ 请注意，我正在使用标记聚类。所以我必须使用“Mar...
我想获取特定类型的附近位置，但谷歌地图上不存在该类型。我想添加该类型。我们可以在谷歌地图上添加类型吗？
从地图中删除 google.maps.marker.AdvancedMarkerView
我有一张地图，它根据搜索填充标记。我正在尝试使用较新的谷歌地图功能 AdvancedMarkerView，以便我可以用自定义 HTML 填充它 - 但是，随着我的搜索更新，我...
问题：来自图像数组的 Google 地图 AdvancedMarkerView
我正在尝试根据数组中的图像属性生成 Google 地图标记。 与以前版本的地图 Api 一起工作得很好。 我现在尝试让它与新版本一起使用（AdvancedMark...
我正在尝试将 Google 的“撰写评论”小部件嵌入到我的网站中。就像 Podium.com 所做的那样。 他们托管一个页面并使用 src 加载 iframe： https://www.google.com/maps/api/js/ReviewsS...
我必须在“管理控制台 > 应用程序 > 其他 Google 服务”中打开“Google 开发者控制台”，但我找不到它。 我是超级管理员。 我需要使用 Google 地图 API。
有了这个组件，如何让用户选择一个位置（一个点）？ 我有一个表单，用户需要感受地址，并且我还需要将纬度和经度发送到服务器。 这是
我正在开发一个带有谷歌地图打字稿API的应用程序，今天我在启动应用程序时收到此警告消息-> 从 2024 年 2 月 21 日开始，google.maps.Marker 将不再 可用的。插入...
大家好，我需要你的帮助 我想使用 Googleplaces api 来获取用户位置最近的医院，我尝试直接在前端实现它，但我不断收到...
我正在尝试渲染如图所示的文本。我可以手动在文本中添加换行符，但是内容将是动态的，因此我认为手动创建新行不是一个很好的选择。 ...
我有一个运行良好的 Google 地图，但我只需要调整它，以便当单击标记并打开信息窗口时，我希望该标记（和地图）位于屏幕的中心。这太...
我正在使用 Google 地图自动完成服务，当我开始在附加到该服务的输入框中键入内容时，它会在下拉列表中提供预测。 但是，在我的应用程序中，我首先让用户进入...
使用 Android Google Maps API 查找路线
我希望能够使用 Android 版 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>