最佳实践 | 获取位置并导航

项目功能:

  1. 获取搜索地址的具体名称、具体行政区及详细地址
  2. 根据获取的位置信息打开该位置,然后点击下方导航图标可以跳转高德地图、腾讯地图进行导航

组件

本次案例我们将实现的界面效果是,点击获取“选择位置”的按钮后,在地图上可以显示当前的位置,并能够显示当前位置的各级别详细地址信息。点击“导航”按钮,可以会打开当前位置的腾讯地图(在小程序内),点击下方导航图标可以跳转高德地图、腾讯地图等APP进行导航。 根据项目效果拖,取相应组件并调整其位置、大小及样式。

一、选择位置并显示

创建页面数据接收地理位置信息

当我们为“选择位置”的按钮添加行为时,我们会发现需要将获取的位置信息赋值给某个变量,在括号中提示到仅限页面数据。也就是我们需要创建页面数据用来接收对应的信息方便后续的使用。 (注意四个页面数据的类型根据获取的信息不同需要对应进行修改)

添加“选择位置”行为

  • “选择位置”
为“选择位置”按钮添加“选择位置”这个行为,有三个内容可以进行赋值,将对应的信息赋值给刚刚创建的页面数据即可。
  • 成功时——获取行政区域名称
获取行政区域名称行为,则会从一个“地理位置”类型的数据处提取出location_info类型的数据,可从这个location_info数据中获取国家、省、市、区等数据。同样这个信息我们也需要赋值给页面数据。

为地图绑定数据显示当前位置

获取位置之后,为可以让地图显示出当前所在地,我们需要给地图进行数据绑定。

显示获取到的各级行政区域名字

根据对应的文字组件绑定对应页面数据获取到的信息。 行政区域的数据绑定,是将location_info类型数据中的国家、省、市、区等数据拼在一起获得的。 (location_info类型数据是一个对象,可从中获取国家、省、市、区等各个key的数据)

二、导航

添加“打开位置”行为

当我们选择位置后,想要导航至该位置时,我们只需要为导航按钮添加一个新的行为——“打开位置”即可。对于这个行为需要绑定的参数一共有三个,分别为地理位置、地址和名称。我们可以只绑定“地理位置”信息就可以完成点击该按钮时,在腾讯地图中打开选择的地址。

案例优化

如果填写了名称和地址两个参数,在打开位置时,在腾讯地图(小程序内)中将会显示具体的位置名称和详细地址。否则将只显示“[位置]”。名称的参数将会决定在地图app中你的终点名称。 如果你需要在腾讯地图(小程序内)中显示对应的位置名称和详细地址,同样可以通过绑定对应的页面数据来实现该效果。

Tips:

生成预览时,可能会遇见如下的预编译报错的修改建议,可直接忽略点击右上角的“继续生成预览”即可。
2022-06-24
5 0