通过Google Maps JavaScript API版本3，您可以将Google地图的功能嵌入到您自己的网站中。版本3为移动设备提供了极大改进的支持。在Maps API Google Group中提出非编程和许可问题（请参阅完整说明以获取链接）
Google Maps API onClick 事件：如何减少多次或快速点击的反跳延迟？
我已经实现了在谷歌地图API上获取onClick事件的常规策略： map.value.addListener("点击", (事件) => { onClick(事件); }); 这对大多数人来说都很有效...
我正在从事一个项目，需要一个功能来使用 Google 地图识别一个物体（在我的例子中是一辆汽车）当前位于另一个物体的前面或后面。 我目前拥有轴承（东方汽车...
我的应用程序中保存了由附近地点 API 提供的地点 ID。但是如果我尝试使用以下方式进行地点详细信息 API 调用 保存的地点 ID 我收到下面提到的错误： {“
在 Google 地图街景中显示 AdvancedMarkerElement
我可以在谷歌街景中渲染 google.maps.marker.AdvancedMarkerElement 吗？我的标记在默认地图上渲染得很好，但在切换到街景视图时消失。 我正在使用 React 并遵循...
加载后更改 Google Maps v3 mapOptions 对象
初始地图加载后如何修改V3地图的mapOptions？ 具体来说，我希望能够翻转 可拖动：假 选项 可拖动：true 当一个动作（例如
如何在运行时更改 BlazorGoogleMaps 库中的 MapOptions？
我正在使用 BlazorGoogleMaps NuGet 包。 您可以在以下位置查看源代码：GitHub 我希望能够在执行期间将 MapType 更改为 Satellite 和 RoadMap。 以下鳕鱼...
将 Google 地图静态 API 与电子邮件 AMP 集成
我们希望将使用 AMP4EMAIL 创建的电子邮件中的表单提交到 Google Maps Static API，并根据表单提交检索要在电子邮件中显示的图像。 我们是否应该期待任何 tr...
Google 地图 Javascript API 未显示在网页上
我正在尝试在我网站的“联系我们”组件中的 React/Javascript 代码上使用 Google 地图 API，但是地图本身没有显示。我相信代码的工作原理是 &q...
在绘制有效多边形之前单击同一点两次时会触发多边形叠加完成事件
我们正在使用谷歌地图的绘图管理器来绘制多边形。当用户在绘制有效多边形之前错误地单击同一点两次时，将触发 overrideCompleted 事件。难道是……
大家好，我正在使用meteor-google-map。我可以在桌面上看到它们，但在移动设备上看不到它们。谁能告诉我我做错了什么？在移动设备上，地图容器都是...
我想在针对摩洛哥人的网络应用程序中使用谷歌地图，问题是地图工作正常，但摩洛哥的边界不完整。这是一个政治问题，恐怕是
我正在加载一个已加载地图和路线的页面。 我们可以通过此表格更改出发地、目的地和运输方式： ... 我正在加载一个已加载地图和路线的页面。 我们可以通过此表格更改出发地、目的地和运输方式： <div id="formulaire" class="box"> <input id="start" type="text" value="$4DTEXT($vo_personne.origine)" class="input my-1"> <input id="end" type="text" value="$4DTEXT($vo_personne.destination)" class="input my-1"> <div class="select my-1"> <select id="mode_transport"> <option value="DRIVING">Voiture</option> <option value="TRANSIT">Transports</option> </select> </div> <input type="submit" value="Actualiser le trajet" class="button my-1"> </div> 当我更改表单中的某些内容时，地图会发生变化，路线也会发生变化，但我没有找到清除上一张地图上的旧路线（折线）的方法。 这是我的JS代码 <script> // onglets jquery UI $( function() { $( "#tabs" ).tabs(); } ); // Google Maps function initMap() { directionsRenderer = new google.maps.DirectionsRenderer({ polylineOptions : { // works only on the active path strokeColor: '#0047b3', strokeOpacity: 1.0, strokeWeight: 7 } }); directionsService = new google.maps.DirectionsService(); map = new google.maps.Map(document.getElementById("carte"), { zoom: 5, center: { lat : 46.603354, lng: 1.888334}, // france }); directionsRenderer.setMap(map); calculateAndDisplayRoute(directionsService, directionsRenderer); document.getElementById("mode_transport").addEventListener("change", () => { calculateAndDisplayRoute(directionsService, directionsRenderer); }); document.getElementById("start").addEventListener("change", () => { calculateAndDisplayRoute(directionsService, directionsRenderer); }); document.getElementById("end").addEventListener("change", () => { calculateAndDisplayRoute(directionsService, directionsRenderer); }); } function calculateAndDisplayRoute(directionsService, directionsRenderer) { start = document.getElementById("start").value; end = document.getElementById("end").value; selectedMode = document.getElementById("mode_transport").value; directionsRenderer.setMap(map); directionsRenderer.setPanel(document.getElementById("itineraire")); directionsRequest = { origin: start, destination: end, travelMode: google.maps.TravelMode[selectedMode], provideRouteAlternatives: true, optimizeWaypoints: true, }; directionsService .route(directionsRequest) .then((response) => { directionsRenderer.setDirections(response); // console.log (response); // console.log (response.routes.length + ' routes'); // status = (response.status); if (status === 'OK') { // les routes trouvées for (var i = 0, len = response.routes.length; i < len; i++) { new google.maps.DirectionsRenderer({ map: map, directions: response, routeIndex: i }); // route sélectionnée par défaut ? // lui attribuer un ID ? var polyline = response.routes[i] ; } console.log (polyline); } }) .catch((e) => window.alert("Directions request failed due to " + e)); } // création de la carte à l'ouverture de la page window.initMap = initMap; </script> 我是初学者，这是我的第一张地图，所以我没有找到更新折线的解决方案。 新的很好，但最旧的应该删除或隐藏。 我尝试通过添加 polyline.remove() 来更改事件侦听器，但它会产生此错误： 未捕获（承诺中）ReferenceError：polyLinePath 未定义 document.getElementById("mode_transport").addEventListener("change", () => { polyline.remove(); calculateAndDisplayRoute(directionsService, directionsRenderer); }); document.getElementById("start").addEventListener("change", () => { polyline.remove(); calculateAndDisplayRoute(directionsService, directionsRenderer); }); document.getElementById("end").addEventListener("change", () => { polyline.remove(); calculateAndDisplayRoute(directionsService, directionsRenderer); }); 感谢您的帮助 您需要保留对用于显示路线的 DirectionRenderer 对象的引用。 全球范围内： let renderer = []; 然后，当您创建渲染器时，将它们推送到该数组上： for (var i = 0, len = response.routes.length; i < len; i++) { renderer.push(new google.maps.DirectionsRenderer({ map: map, directions: response, routeIndex: i })); } 然后要从地图中删除路线，请将这些渲染器上的地图设置为 null： function removeOldRoutes() { for (var i=0; i < renderer.length; i++) { renderer[i].setMap(null); } renderer = []; } 概念证明小提琴 代码片段 let map; let renderer = []; // Google Maps function initMap() { directionsRenderer = new google.maps.DirectionsRenderer({ polylineOptions : { // works only on the active path strokeColor: '#0047b3', strokeOpacity: 1.0, strokeWeight: 7 } }); directionsService = new google.maps.DirectionsService(); map = new google.maps.Map(document.getElementById("carte"), { zoom: 5, center: { lat : 46.603354, lng: 1.888334}, // france }); directionsRenderer.setMap(map); calculateAndDisplayRoute(directionsService, directionsRenderer); document.getElementById("mode_transport").addEventListener("change", () => { removeOldRoutes() calculateAndDisplayRoute(directionsService, directionsRenderer); }); document.getElementById("start").addEventListener("change", () => { removeOldRoutes() calculateAndDisplayRoute(directionsService, directionsRenderer); }); document.getElementById("end").addEventListener("change", () => { removeOldRoutes() calculateAndDisplayRoute(directionsService, directionsRenderer); }); } function removeOldRoutes() { for (var i=0; i < renderer.length; i++) { renderer[i].setMap(null); } renderer = []; } function calculateAndDisplayRoute(directionsService, directionsRenderer) { start = document.getElementById("start").value; end = document.getElementById("end").value; selectedMode = document.getElementById("mode_transport").value; directionsRenderer.setMap(map); directionsRenderer.setPanel(document.getElementById("itineraire")); directionsRequest = { origin: start, destination: end, travelMode: google.maps.TravelMode[selectedMode], provideRouteAlternatives: true, optimizeWaypoints: true, }; directionsService .route(directionsRequest) .then((response) => { directionsRenderer.setDirections(response); console.log (response); console.log (response.routes.length + ' routes'); status = (response.status); if (status === 'OK') { // les routes trouvées for (var i = 0, len = response.routes.length; i < len; i++) { console.log("rendering route "+i); renderer.push(new google.maps.DirectionsRenderer({ map: map, directions: response, routeIndex: i })); } } }) .catch((e) => window.alert("Directions request failed due to " + e)); } // création de la carte à l'ouverture de la page window.initMap = initMap; /* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #carte { height: 80%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } <!doctype html> <html> <head> <title>StackSnippet</title> </head> <body> <div id="carte"></div> <div id="formulaire" class="box"> <input id="start" type="text" value="Paris" class="input my-1"> <input id="end" type="text" value="Marseille" class="input my-1"> <div class="select my-1"> <select id="mode_transport"> <option value="DRIVING">Voiture</option> <option value="TRANSIT">Transports</option> </select> </div> <input type="submit" value="Actualiser le trajet" class="button my-1"> </div> <!-- The `defer` attribute causes the script to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly" defer ></script> </body> </html>
像往常一样使用谷歌地图，有一天标记中文本的字体大小似乎增加了。查了一下，发现是因为最近更新了3.58。我可以回去...
将占位符文本添加到新的 PlacesAutocompleteElement
Google Places Autocomplete API 过去仅使用 作为搜索字段。 所以你只需添加即可。 现在文档告诉您附加一个 <...
我只是创建一个带有标记的谷歌地图，并选择按类别过滤这些标记 #地图画布{ 宽度：500px； 高度：500px； } <p>我只是创建一个带有标记的谷歌地图，并选择按类别过滤这些标记</p> <pre><code> #map-canvas { width: 500px; height: 500px; } <script src="https://maps.googleapis.com/maps/api/js?key=&v=3.0&sensor=true&language=ee&dummy=dummy.js"></script> <div id="map-canvas"></div> <select id="type" onchange="filterMarkers(this.value);"> <option value="">Please select category</option> <option value="second">second</option> <option value="car">car</option> <option value="third">third</option> </select> </code></pre> <p>和js：</p> <pre><code>var gmarkers1 = []; var markers1 = []; var infowindow = new google.maps.InfoWindow({ content: '' }); // Our markers markers1 = [ ['0', 'Title 1', 52.4357808, 4.991315699999973, 'car'], ['1', 'Title 2', 52.4357808, 4.981315699999973, 'third'], ['2', 'Title 3', 52.4555687, 5.039231599999994, 'car'], ['3', 'Title 4', 52.4555687, 5.029231599999994, 'second'] ]; /** * Function to init map */ function initialize() { var center = new google.maps.LatLng(52.4357808, 4.991315699999973); var mapOptions = { zoom: 12, center: center, mapTypeId: google.maps.MapTypeId.TERRAIN }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); for (i = 0; i < markers1.length; i++) { addMarker(markers1[i]); } } /** * Function to add marker to map */ function addMarker(marker) { var category = marker[4]; var title = marker[1]; var pos = new google.maps.LatLng(marker[2], marker[3]); var content = marker[1]; marker1 = new google.maps.Marker({ title: title, position: pos, category: category, map: map }); gmarkers1.push(marker1); // Marker click listener google.maps.event.addListener(marker1, 'click', (function (marker1, content) { return function () { console.log('Gmarker 1 gets pushed'); infowindow.setContent(content); infowindow.open(map, marker1); map.panTo(this.getPosition()); map.setZoom(15); } })(marker1, content)); } /** * Function to filter markers by category */ filterMarkers = function (category) { for (i = 0; i < markers1.length; i++) { marker = gmarkers1[i]; // If is same category or category not picked if (marker.category == category || category.length === 0) { marker.setVisible(true); } // Categories don't match else { marker.setVisible(false); } } } // Init map initialize(); </code></pre> <p>我正在尝试使用 MarkerClusterer 函数对标记进行聚类。所以我添加如下所示：</p> <pre><code>function initialize() { var center = new google.maps.LatLng(52.4357808, 4.991315699999973); var mapOptions = { zoom: 12, center: center, mapTypeId: google.maps.MapTypeId.TERRAIN }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); for (i = 0; i < markers1.length; i++) { addMarker(markers1[i]); } var markerCluster = new MarkerClusterer(map, gmarkers1, {imagePath: 'MY_CUSTOM_DIR/images/m'}); } </code></pre> <p>现在效果很好。标记已分组，但是，当我按类别过滤时，群集不会更新。我尝试阅读一些有关 repaint() 函数的教程，但我可以解决它。</p> </question> <answer tick="true" vote="2"> <p>如果您清除 MarkerClusterer (<pre><code>MarkerCluster.clearMarkers()</code></pre>)，然后重新添加您想要可见的标记，这对我有用。</p> <pre><code>filterMarkers = function(category) { var newmarkers = []; for (i = 0; i < markers1.length; i++) { marker = gmarkers1[i]; // If is same category or category not picked if (marker.category == category || category.length === 0) { newmarkers.push(marker); } } markerCluster.clearMarkers(); markerCluster.addMarkers(newmarkers); } </code></pre> <p><a href="http://jsfiddle.net/thbau7w8/1/" rel="nofollow noreferrer">概念证明小提琴</a></p> <p><strong>代码片段：</strong></p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code>/** * Function to init map */ function initialize() { var center = new google.maps.LatLng(52.4357808, 4.991315699999973); var mapOptions = { zoom: 12, center: center, mapTypeId: google.maps.MapTypeId.TERRAIN }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); for (i = 0; i < markers1.length; i++) { addMarker(markers1[i]); } markerCluster = new MarkerClusterer(map, gmarkers1, { imagePath: 'https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m' }); } /** * Function to add marker to map */ function addMarker(marker) { var category = marker[4]; var title = marker[1]; var pos = new google.maps.LatLng(marker[2], marker[3]); var content = marker[1]; marker1 = new google.maps.Marker({ title: title, position: pos, category: category, map: map }); gmarkers1.push(marker1); // Marker click listener google.maps.event.addListener(marker1, 'click', (function(marker1, content) { return function() { console.log('Gmarker 1 gets pushed'); infowindow.setContent(content); infowindow.open(map, marker1); map.panTo(this.getPosition()); map.setZoom(15); } })(marker1, content)); } /** * Function to filter markers by category */ filterMarkers = function(category) { var newmarkers = []; for (i = 0; i < markers1.length; i++) { marker = gmarkers1[i]; // If is same category or category not picked if (marker.category == category || category.length === 0) { newmarkers.push(marker); } } markerCluster.clearMarkers(); markerCluster.addMarkers(newmarkers); } google.maps.event.addDomListener(window, "load", initialize); var gmarkers1 = []; var markers1 = []; var infowindow = new google.maps.InfoWindow({ content: '' }); var markerCluster; // Our markers markers1 = [ ['0', 'Title 1', 52.4357808, 4.991315699999973, 'car'], ['1', 'Title 2', 52.4357808, 4.981315699999973, 'third'], ['2', 'Title 3', 52.4555687, 5.039231599999994, 'car'], ['3', 'Title 4', 52.4555687, 5.029231599999994, 'second'] ];</code></pre> <pre><code>body, html { height: 100%; width: 100%; margin: 0; padding: 0; } #map-canvas { width: 100%; height: 95%; }</code></pre> <pre><code><script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map-canvas"></div> <select id="type" onchange="filterMarkers(this.value);"> <option value="">Please select category</option> <option value="second">second</option> <option value="car">car</option> <option value="third">third</option> </select></code></pre> </div> </div> <p></p> </answer> </body></html>
是否可以使用类似于maps.controls[google.maps.ControlPosition.TOP_CENTER].push(infoWindow)的东西来让控制窗口显示在地图的顶部中心？ 我有一张带有 pol 的地图...
如何在React js中使用谷歌地图方向API添加自定义标记
技术堆栈 - Google 地图方向 Api、React JS 等。 问题陈述 - 使用谷歌地图方向 Api 我正在绘制 3 个引脚，即起点、航路点和目的地。我能够绘制所有这些
Angular 17 google 地图：在index.html 外部加载googleapis 脚本
在我在网上找到的所有示例中，脚本始终嵌入在index.html中。 我想在组件中或在组件中注入的服务中执行此操作。 不幸的是，我没有成功...
我正在制作这个演示。为什么我无法在链接点击时呈现关联的信息窗口？正如你所看到的，我已经尝试过： $('#mapa').append(' 我正在制作这个演示。为什么我无法在链接点击时呈现关联的信息窗口？正如你所看到的，我已经尝试过了： $('#mapa').append('<li class=' + marker.id + '><a href="javascript:showInfo(' + (locations.length - 1) + ')">' + data.markers[p].title + '</a></li>'); function showInfo(i) { google.maps.event.trigger(locations[i], "click"); } 但我越来越 未捕获的引用错误：showInfo 未定义 当我点击链接时。 要从 HTML on click 函数运行，您的 showInfo 函数需要位于全局上下文中。 此外，如果您查看生成的 HTML，您将看到： <a href="javascript:showInfo(-1)">Barcelona</a> （-1 不是数组的有效索引） 并且 locations 数组是空的，你永远不会将标记推到它上面。 当我解决所有这些问题时，链接有效：更新的小提琴 代码片段： var map; var locations = []; function showInfo(i) { google.maps.event.trigger(locations[i], "click"); } $(document).ready(function() { var latlng = new google.maps.LatLng(11.610707, 122.740089); var myOptions = { zoom: 12, center: latlng, disableDefaultUI: true, scaleControl: true, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL }, mapTypeControl: true, draggableCursor: 'move', mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var infowindow = new google.maps.InfoWindow({ content: "" }); var data = { "markers": [{ "latitude": 11.606503, "longitude": 122.712637, "title": "Copenhagen" }, { "latitude": 11.585988, "longitude": 122.757084, "title": "Barcelona" } ] }; locations.length = 0; for (p = 0; p < data.markers.length; p++) { var marker = new google.maps.Marker({ position: new google.maps.LatLng(data.markers[p].latitude, data.markers[p].longitude), map: map, draggable: false, title: "marker " + p, id: p }); locations.push(marker); $('#mapa').append('<li class=' + marker.id + '><a href="javascript:showInfo(' + (locations.length - 1) + ')">' + data.markers[p].title + '</a></li>'); bindInfoWindow(marker, map, infowindow, data.markers[p].title); } function bindInfoWindow(marker, map, infowindow, strDescription) { google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(strDescription); infowindow.open(map, marker); }); } }); @import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); @import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css'); .container { margin-top: 30px; } #map_canvas { width: 100%; height: 400px; } .highlighted { color: red; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script> <script src="http://maps.google.com/maps/api/js"></script> <ul id="mapa"> </ul> <div class="container"> <div class="well"> <div id="map_canvas"></div> </div> </div>
有什么方法可以在 Google 地图中使用 KMZ 文件吗？我的 KML 文件约为 10.7MB，因此无法在 Google 地图上加载。 KMZ 文件大约 2MB。我看到它的唯一方法是拥有多个 KML，但它......