如何提示从嵌入式地图打开 Google Maps Directions 到 Google Maps Navigator 的页面?

     2023-05-07     177

关键词:

【中文标题】如何提示从嵌入式地图打开 Google Maps Directions 到 Google Maps Navigator 的页面?【英文标题】:How to prompt opening Google Maps Directions from embedded map into page into the Google Maps Navigator? 【发布时间】:2018-02-23 02:33:12 【问题描述】:

我已将谷歌地图嵌入到我的页面中,并在其上显示各种标记。

每当用户点击一个标记时,就会在地图上绘制一条用户当前位置和标记之间的路线。

为了实现这一点,我以以下方式使用 google.maps.DirectionsService():

var directionService = new scp.google.maps.DirectionsService();



 var requestDriving =                                                  
|   origin: start,                                                     
|   destination: end,                                                  
|   travelMode: scp.google.maps.TravelMode.DRIVING                     
;        



directionService.route( requestDriving, function ( response, status )       
|   if ( status === 'OK' )                                            
|   |   console.log( response );                                       
|   |   scp.directionsDriving.setDirections( response );               
|   |   scp.directionsDriving.setMap( scp.map );                       
|                                                                     
);    

函数directionService.route(...) 绘制上述点(制造商)之间的路线。

directionService.route回调中响应对象的内容如下:

Objectgeocoded_waypoints: Array[2]0: Object1: Objectlength: 2__proto__: Array[0]request: Objectdestination: Objectorigin: ObjecttravelMode: "WALKING"__proto__: Objectroutes: Array[1]0: Objectbounds: _.Icb: scf: xc__proto__: Objectcopyrights: "Картографски данни ©2017 Google"legs: Array[1]overview_path: Array[7]overview_polyline: "_tqcGo_lmCTBLCRKR[nA`AQl@"summary: "пл. „Народно събрание“ и ул. „Цар Шишман“"warnings: Array[1]waypoint_order: Array[0]__proto__: Objectlength: 1__proto__: Array[0]status: "OK"__proto__: Object

如何创建提示/链接以在用户绘制路线时出现/弹出,询问他/她是否要打开导航器(Android/OS/浏览器)以跟随路线沿线的方向画了吗?

谢谢!

【问题讨论】:

【参考方案1】:

我实际上找到了一个非常简单的解决方案。这可以使用 google maps urls 来实现:

https://www.google.com/maps/dir/?api=1&parameters,

我在这里使用的方便参数是标记的place_id:

https://www.google.com/maps/dir/?api=1&origin=[SOME PLACE]&origin_place_id=[SOME PLACE ID]&destination=[THE DESTINATION OF OUR ROUTE]&destination_place_id=[ANOTHER PLACE ID]

【讨论】:

我可以更改 Google Maps 嵌入式地图 (iframe) 中的标记吗?

】我可以更改GoogleMaps嵌入式地图(iframe)中的标记吗?【英文标题】:CanIchangethemarkerinaGoogleMapsembeddedmap(iframe)?【发布时间】:2010-11-1315:00:32【问题描述】:我知道我可以使用GoogleMapsAPI做到这一点,但您知道是否有办法更改嵌入式G... 查看详情

Google Maps API - 如何在不显示地图的情况下从自动完成获取纬度和经度?

】GoogleMapsAPI-如何在不显示地图的情况下从自动完成获取纬度和经度?【英文标题】:GoogleMapsAPI-howtogetlatitudeandlongitudefromAutocompletewithoutshowingthemap?【发布时间】:2012-11-0820:11:42【问题描述】:我正在尝试从AutocompleteGoogleMapsAPI获... 查看详情

在 Google Maps App 中使用标记打开 Google Map

...1:16:58【问题描述】:我使用GoogleMapsJavaScriptAPI在网页内的地图上放置了一堆标记。我希望允许用户选择在Google地图应用中打开带有标记的地图,如果他们的设备上有地图的话。目前,当单击标记时,会显示位置名称和其他 查看详情

如何使用 react-google-maps 通过单击在地图上添加标记?

】如何使用react-google-maps通过单击在地图上添加标记?【英文标题】:HowtoaddmarkeronmapbyClickusingreact-google-maps?【发布时间】:2018-08-2219:25:29【问题描述】:我正在努力寻找一个非常简单的示例,说明当用户使用基于组件的React-google... 查看详情

Google Maps Api 点击地图点添加

...发布时间】:2018-07-2215:08:44【问题描述】:点击googlemap时如何加点?所以当我点击地图时,我想添加一个指针,但我不能。在此过程中,我从地图中获取LATLANG值并将其传输到输入中。然后我填写必填字段并填写表格。但是当我... 查看详情

从 google_maps_flutter 中删除多余的标记和圆圈

...还有大量其他标记和圆圈会中断体验(餐厅、商店等)。如何禁用或删除它们?【问题讨论】:【参考方案1】: 查看详情

Google Maps Android Studio - 如何禁用地图控件?

】GoogleMapsAndroidStudio-如何禁用地图控件?【英文标题】:GoogleMapsAndroidStudio-howdisablethemapcontrols?【发布时间】:2015-08-1917:57:35【问题描述】:我正在使用MapsActivity在AndroidStudio中工作。一切正常,但如何禁用显示在Google地图顶部的... 查看详情

Flutter:Google Maps 如何从 Firestore 设置图标

】Flutter:GoogleMaps如何从Firestore设置图标【英文标题】:Flutter:GoogleMapshowtoseticonfromFirestore【发布时间】:2021-10-0201:51:00【问题描述】:我有谷歌地图页面。在其中我展示了很多标记。我使用FireStore来存储标记数据,例如latlng、标... 查看详情

Google Maps API v3:如何将缩放级别和地图中心设置为用户提交的位置?

】GoogleMapsAPIv3:如何将缩放级别和地图中心设置为用户提交的位置?【英文标题】:GoogleMapsAPIv3:HowtoSetZoomLevelAndMapCenterToUserSubmittedLocation?【发布时间】:2012-01-2508:43:17【问题描述】:我已经使用Google的这个教程构建了一个网络应... 查看详情

如何在 swift 中为 ios 的 google maps sdk 中的地图视图添加标记

】如何在swift中为ios的googlemapssdk中的地图视图添加标记【英文标题】:Howtoaddmarkerforamapviewingooglemapssdkforiosinswift【发布时间】:2015-09-2600:54:28【问题描述】:尝试在谷歌地图上添加标记,但应用在addMarker()函数调用时崩溃,异常... 查看详情

React-google-maps +redux - 获取新位置时如何使地图居中?

】React-google-maps+redux-获取新位置时如何使地图居中?【英文标题】:React-google-maps+redux-howtocentermapwhennewlocationisfetched?【发布时间】:2017-11-1607:12:27【问题描述】:我正在使用react-google-maps并遵循该示例:LINK。我正在获取来自GPS设... 查看详情

如何在 Google Maps V3 上触发标记的 onclick 事件?

】如何在GoogleMapsV3上触发标记的onclick事件?【英文标题】:HowtotriggertheonclickeventofamarkeronaGoogleMapsV3?【发布时间】:2011-02-1310:15:46【问题描述】:如何从地图外部触发Google地图上标记的onclick事件?我使用API的第3版。我看过很多... 查看详情

如何在 react-google-maps 中添加标记?

】如何在react-google-maps中添加标记?【英文标题】:Howtoaddmarkersinreact-google-maps?【发布时间】:2017-11-1702:04:45【问题描述】:在Meteor1.5中使用ReactJS问题:需要一种方法来添加Marker使用react-google-maps使用ES6和JSX格式遵循文档并能够... 查看详情

如何从 url 获取 JSON 数据并在 Google Maps 上放置标记?

】如何从url获取JSON数据并在GoogleMaps上放置标记?【英文标题】:HowtogetJSONdatafromaurlandplacemarkersonGoogleMaps?【发布时间】:2018-10-0417:18:26【问题描述】:我想知道如何从URL获取JSON数据并将坐标(纬度、经度)作为标记添加到androids... 查看详情

如何使用 Google Maps Flutter 默认显示地图标签

】如何使用GoogleMapsFlutter默认显示地图标签【英文标题】:HowtodisplaymaplabelsbydefaultwithGoogleMapsFlutter【发布时间】:2021-04-1001:44:57【问题描述】:我想我的问题和这里一样:Fluttershowmarker\'sinfoWindowTextbydefaultinGooglemapwidget但是,没有... 查看详情

谷歌地图使用 google_maps_flutter 插件显示空白地图

】谷歌地图使用google_maps_flutter插件显示空白地图【英文标题】:GoogleMapsshowsblankmapusinggoogle_maps_flutterplugin【发布时间】:2019-04-1521:07:22【问题描述】:我正在开发一个使用google_maps_flutter插件(版本0.5.7)来显示地图的应用程序。... 查看详情

如何从 Wordpress 中的 Google Maps ACF 字段中删除纬度和经度?

】如何从Wordpress中的GoogleMapsACF字段中删除纬度和经度?【英文标题】:HowtoremovelatitudeandlongitudefromGoogleMapsACFfieldinWordpress?【发布时间】:2015-04-2121:58:56【问题描述】:在Wordpress中,有一个高级自定义字段Google地图选项。我用它来... 查看详情

如何使用 vue2-google-maps 显示谷歌地图

】如何使用vue2-google-maps显示谷歌地图【英文标题】:HowtodisplayGoogleMapswithvue2-google-maps【发布时间】:2020-02-2913:50:03【问题描述】:我想在我的应用程序中使用vue2-google-maps,但地图没有显示。我仔细关注了documentation的使用方法,... 查看详情