项目功能:
- 获取搜索地址的具体名称、具体行政区及详细地址
- 根据获取的位置信息打开该位置,然后点击下方导航图标可以跳转高德地图、腾讯地图进行导航
组件
本次案例我们将实现的界面效果是,点击获取“选择位置”的按钮后,在地图上可以显示当前的位置,并能够显示当前位置的各级别详细地址信息。点击“导航”按钮,可以会打开当前位置的腾讯地图(在小程序内),点击下方导航图标可以跳转高德地图、腾讯地图等APP进行导航。
根据项目效果拖,取相应组件并调整其位置、大小及样式。
一、选择位置并显示
创建页面数据接收地理位置信息
当我们为“选择位置”的按钮添加行为时,我们会发现需要将获取的位置信息赋值给某个变量,在括号中提示到仅限页面数据。也就是我们需要创建页面数据用来接收对应的信息方便后续的使用。
(注意四个页面数据的类型根据获取的信息不同需要对应进行修改)
添加“选择位置”行为
- “选择位置”
为“选择位置”按钮添加“选择位置”这个行为,有三个内容可以进行赋值,将对应的信息赋值给刚刚创建的页面数据即可。
- 成功时——获取行政区域名称
获取行政区域名称行为,则会从一个“地理位置”类型的数据处提取出location_info类型的数据,可从这个location_info数据中获取国家、省、市、区等数据。同样这个信息我们也需要赋值给页面数据。
为地图绑定数据显示当前位置
获取位置之后,为可以让地图显示出当前所在地,我们需要给地图进行数据绑定。
显示获取到的各级行政区域名字
根据对应的文字组件绑定对应页面数据获取到的信息。
行政区域的数据绑定,是将location_info类型数据中的国家、省、市、区等数据拼在一起获得的。
(location_info类型数据是一个对象,可从中获取国家、省、市、区等各个key的数据)
二、导航
添加“打开位置”行为
当我们选择位置后,想要导航至该位置时,我们只需要为导航按钮添加一个新的行为——“打开位置”即可。对于这个行为需要绑定的参数一共有三个,分别为地理位置、地址和名称。我们可以只绑定“地理位置”信息就可以完成点击该按钮时,在腾讯地图中打开选择的地址。
案例优化
如果填写了名称和地址两个参数,在打开位置时,在腾讯地图(小程序内)中将会显示具体的位置名称和详细地址。否则将只显示“[位置]”。名称的参数将会决定在地图app中你的终点名称。
如果你需要在腾讯地图(小程序内)中显示对应的位置名称和详细地址,同样可以通过绑定对应的页面数据来实现该效果。
Tips:
生成预览时,可能会遇见如下的预编译报错的修改建议,可直接忽略点击右上角的“继续生成预览”即可。