google-maps 相关问题

从“@vis.gl/react-google-maps”导入 { APIProvider, Map, Pin }；导出默认函数 ModalMapComponent({ lat, lng, width, Zoom }: any) { 返回（ import { APIProvider, Map, Pin } from "@vis.gl/react-google-maps"; export default function ModalMapComponent({ lat, lng, width, zoom }: any) { return ( <div className={`overflow-hidden rounded-md w-[${width}] h-[250px]`}> <APIProvider apiKey=""> <Map center={{ lat, lng }} zoom={10} styles={gMapStyle}> </Map> </APIProvider> </div> ); } 当我双击或单击地图上的 + 或 - 符号时，地图不会放大或缩小。设置为 10。我怎样才能让人们缩放？ import { APIProvider, Map } from "@vis.gl/react-google-maps"; export default function ModalMapComponent({ lat, lng, width, zoom }: any) { return ( <div style={{ width: `${width}`, height: '250px' }} className="overflow-hidden rounded-md"> <APIProvider apiKey=""> <Map center={{ lat, lng }} zoom={zoom} styles={gMapStyle} options={{ gestureHandling: 'auto' }} onZoomChanged={(event) => { const newZoom = event.target.getZoom(); console.log('Zoom level changed to:', newZoom); }} > </Map> </APIProvider> </div> ); } 此代码定义了一个名为 ModalMapComponent 的 React 组件，它使用 @vis.gl/react-google-maps 库集成了 Google 地图。它需要四个属性：纬度 (lat)、经度 (lng)、宽度和缩放级别。该组件渲染一个 div 作为地图的容器，具有基于 width 属性的动态宽度和 250 像素的固定高度。在此容器内，APIProvider组件用于提供渲染地图所需的 Google Maps API 密钥。 Map 组件配置有中心坐标、初始缩放级别和自定义样式。它还包括将 gestureHandling 设置为“auto”的选项，允许用户使用双击或捏合手势来放大和缩小。此外，还有一个 onZoomChanged 的事件处理程序，每当新的缩放级别发生变化时，它都会将其记录到控制台。总的来说，这段代码创建了一个功能性和交互式的 Google 地图组件，可以在 React 应用程序中轻松重用。我认为我的代码可以解决问题，或者您可以向我提供更多详细信息和您的目标以改进我的答案。

reactjs google-maps

回答 1 投票 0

如何在vue js中使用来自google的动态导入库

我尝试在index.html中添加来自谷歌地图的动态导入库，如下所示 (g=>{var h,a,k,p="Google 地图 JavaScript API",c="google",l="importLib...</desc> <question vote="1"> <p>我尝试从谷歌地图添加动态导入库<pre><code>index.html</code></pre>像这样</p> <pre><code><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: "YOUR_API_KEY", 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> <p>并在 <pre><code>src/pages/GoogleMaps.vue</code></pre></p> <pre><code>export default { name: 'GoogleMapsImplementation', async created() { await this.initMap(); }, methods: { async initMap() { const { Map } = await google.maps.importLibrary('maps'); this.map = new Map(document.getElementById('map'), { center: { lat: -34.397, lng: 150.644 }, zoom: 8, }); }, }, }; </code></pre> <p>然后我得到了<pre><code>"ReferenceError: google is not defined"</code></pre></p> <p>是否无法在index.html的vue js方法中使用全局var？有人有这样的问题吗</p> </question> <answer tick="false" vote="0"> <p>让我指导您通过<strong>2 个步骤</strong>找到可行的解决方案。 <a href="https://developers.google.com/maps/documentation/javascript/load-maps-js-api#migrate-to-dynamic" rel="nofollow noreferrer">官方迁移指南</a>中的步骤非常简单，您只需要：<br/> <br/> <strong>第 1 步</strong>：将动态导入库复制/粘贴到您的 <pre><code>index.html</code></pre> 中。确保您在 <strong>main.js 脚本标签上方</strong>执行此操作，该标签位于 body 标签的底部。 <br/> <br/> 注意：不必费心更改顶行。 <br/></p> <ul> <li>在第二行显示 <pre><code>GOOGLE_API_KEY</code></pre> 的位置添加 <pre><code>key: "YOUR_API_KEY"</code></pre>，并确保对密钥添加限制，因为每个人都可以看到它。添加限制也非常简单 - 您可以单击 Google Cloud Console 中的 API 密钥，然后执行几个简单的步骤。我将在答案的最底部解释关键限制，以进一步澄清这一点。</li> <li><pre><code>libraries</code></pre>行是可选的，这是向地图添加一组固定库的一种方法。</li> </ul> <pre><code><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: "YOUR_API_KEY", // add google api key here v: "weekly", // indicate the version to use (weekly, beta, alpha, etc.). libraries: ["drawing", "geometry", "places", "localContext", "visualization"], // optional but this is one way of adding your libraries }); </script> </code></pre> <br/> <p><strong>第 2 步</strong>：转到您的 Vue 组件并确保按如下方式初始化它：</p> <pre><code><scrip> import { onMounted, reactive } from "vue"; export default { name: "MapComponent", components: {}, async setup() { const state = reactive({ map: null, mapOptions: { center: { lat: -34.397, lng: 150.644 }, zoom: 8, }, }); const initializeMap = async () => { const { Map } = await google.maps.importLibrary("maps"); state.map = new Map(document.getElementById("map"), state.mapOptions); }; onMounted(async () => { initializeMap(); }); return { state }; }, }; </script> <template> <div> <div id="map" style="height: 100vh; width: 100vw"></div> </div> </template> </code></pre> <p>这应该是你的地图工作的全部了！</p> <p><strong>推荐</strong>：在 Google Cloud Console 中限制您的 <pre><code>GOOGLE_API_KEY</code></pre>：</p> <ul> <li>导航到您颁发密钥的位置（在 API 和服务 -> 凭证中），然后单击您的密钥，如下图所示： <a href="https://i.sstatic.net/jMGbfDFd.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvak1HYmZERmQucG5n" alt="GCP APIs & Services -> 凭证，已发布的 API 密钥"/></a></li> </ul> <br/> <ul> <li>它会打开一个页面，其中包含您需要完成的一些操作。如果 <pre><code>Websites</code></pre> 使用 API KEY，则勾选此框： <a href="https://i.sstatic.net/Ev6qvmZP.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvRXY2cXZtWlAucG5n" alt="GCP API Key Restrictions - Websites"/></a></li> </ul> <br/> <ul> <li>接下来，如果您选择了 <pre><code>Websites</code></pre>，请输入您网站的 URL。包含用于开发的 <pre><code>localhost</code></pre>，然后在实时部署时不要忘记将其删除，并放置部署的 URL： <a href="https://i.sstatic.net/xFbsSX4i.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQveEZic1NYNGkucG5n" alt="GCP API Key Restrictions - Specify websites"/></a></li> </ul> <br/> <ul> <li>最后，勾选 <pre><code>restrict key</code></pre> 单选按钮，然后从下拉列表中找到并勾选 <pre><code>Maps JavaScript API</code></pre>。单击<pre><code>save</code></pre>，您就准备好了！ <a href="https://i.sstatic.net/Y70Awbx7.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvWTcwQXdieDcucG5n" alt="GCP API Key Restrictions - Restrict key, tick Maps JS API, save"/></a></li> </ul> </answer> <answer tick="false" vote="-1"> <p>官方 <a href="https://www.npmjs.com/package/@googlemaps/google-maps-services-js" rel="nofollow noreferrer">google 地图 npm 包</a>不支持浏览器环境，<strong>Node.js 应用程序是该库唯一支持的环境</strong>。如需了解更多信息，请查看此<a href="https://stackoverflow.com/questions/46896362/how-to-install-google-maps-through-npm">stackoverflow</a>问题</p> <p>所以，无论如何你想在浏览器环境中使用谷歌地图，你必须使用<strong>非官方软件包</strong>来做到这一点。</p> <p>我强烈推荐<a href="https://www.npmjs.com/package/@googlemaps/js-api-loader" rel="nofollow noreferrer">这个包</a>每周下载数百万次。</p> </answer> </body></html>

javascript vue.js google-maps

回答 0 投票 0

自定义 Google 地图位置热链接

我有一个使用 Google 地图 API 进行导航的自定义地图，我正在寻找一个地址来热链接到地图上的当前位置（如以下地图链接；...

javascript google-maps

回答 2 投票 0

Google Map API 通过纬度和经度显示附近地点

我有一个 Api 密钥、Api 控制台和 Sh1，并使用 EclipseIDE ANDROID -> 首选项，我添加Api中的所有数据如下： https://maps.googleapis.com/maps/api/place/radarsearch/json?location=48.859294,2.

android json google-maps

回答 2 投票 0

如何通过侧面链接单击呈现标记信息窗口

我正在制作这个演示。为什么我无法在链接点击时呈现关联的信息窗口？正如你所看到的，我已经尝试过： $('#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-maps google-maps-api-3

回答 1 投票 0

GMSMapView 并在应用程序中设置不同的语言 - Xcode/Swift

我正在开发一个使用 Google 地图库的 iOS 应用程序，我希望能够使用以下代码在应用程序内更改我的应用程序的语言和本地化设置： func 选择语言(

swift xcode google-maps localization gmsmapview

回答 1 投票 0

我的 flutter 中的 Google 地图使用包 google_maps_flutter 它显示在 ios 模拟器中，但它没有显示在实际的 ios 设备（我的 iphone）上

我使用这个包在我的flutter应用程序中实现了谷歌地图：https://pub.dev/packages/google_maps_flutter。它显示在 Android 模拟器中，但未显示在 ios 模拟器和

flutter google-maps flutter-getx api-key google-maps-flutter

回答 1 投票 0

google-maps 相关问题

最新问题