前端页面使用google地图api实现导航功能,开发国外网站免费简单好用

开发国外软件的时候,想使用goole map实现导航等功能,可以使用google的api来做,官方文档地址:https://developers.google.com/maps/documentation/urls/get-started?hl=zh-cn ,比如:

支持的请求的操作:

  • 搜索 - 启动会显示特定地点图钉的 Google 地图,或执行常规搜索并启动地图以显示结果:
    https://www.google.com/maps/search/?api=1&parameters
  • 路线 - 请求路线并启动 Google 地图并显示以下结果:
    https://www.google.com/maps/dir/?api=1&parameters
  • 显示地图 - 启动 Google 地图时不显示标记或路线:
    https://www.google.com/maps/@?api=1&map_action=map&parameters
  • 显示街景全景图片 - 启动互动式全景图片:
    https://www.google.com/maps/@?api=1&map_action=pano&parameters

重要提示:参数 api=1 用于标识此网址所对应地图网址的版本。每个请求中都需要包含此参数。唯一的有效值为 1。如果网址中包含 api=1,则系统会忽略所有参数,并将在浏览器或 Google 地图移动应用中启动默认的 Google 地图应用,具体取决于所使用的平台(例如 https://www.google.com/maps)。

只需要将地址和出发点信息拼接到url地址中就可以了:

记得地址信息要进行url编码,编码方式:

encodeURIComponent 和 decodeURIComponent(推荐使用)

它用于对URL的组成部分进行个别编码,而不用于对整个URL进行编码。
因此,"; / ? : @ & = + $ , #",这些在encodeURI()中不被编码的符号,在encodeURIComponent()中统统会被编码。

测试的例子代码:

    const destination = '中国上海市浦东新区凯庆路299号'
    const params = encodeURIComponent(destination)
    var win = window.open(
        `https://www.google.com/maps/dir/?api=1&destination=${params}`,
        '_blank'
    )