快应用适配微信openLocation接口

最新推荐文章于 2024-03-14 16:35:35 发布

原创

最新推荐文章于 2024-03-14 16:35:35 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何在快应用中实现类似小程序的openLocation功能。通过自定义页面布局、样式和JavaScript逻辑，利用地图组件和URL scheme，开发者可以创建一个能够显示位置标注并支持导航的快应用页面。

来源：快应用官方论坛

作者：初冬、阳光

大家都知道，其他平台小程序，都有官方提供的openLocation接口（通过位置坐标在地图上显示对应的标注，同时支持导航），但是快应用官方没有提供，其实官方并不是没有提供，而是提供了更自由的方式。接下来我给大家介绍一下快应用openLocation适配。

页面布局模板

首先写好页面的布局模板，展示一个地图，一个地址展示栏，一个导航按钮，一个我的位置控制组件，代码如下：（左右滑动查看全部代码）

<template>
  <div class="open-location-contanier">
    <map id='map' class='map' markers="{
   
   {markers}}" controls="{
   
   {controls}}" @controltap="controlTap" latitude="{
   
   {latitude}}" longitude="{
   
   {longitude}}" scale="{
   
   {scale}}" showmylocation="{
   
   {showMylocation}}"></map>
    <div class='map-tool'>
      <div class='location-info-box'>
        <text class='location-name'>{
   
   {name}}</text>
        <text class='location-address'>{
   
   {address}}</text>
      </div>
      <text class='location-btn' if='{
   
   {isShowNav}}' @click="goNavigation">导航</text>
    </div>
  </div>
</template>

自定义

样式如下，大家可以自定义：

<style>
.open-location-contanier {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.location-info-box {
  height: 200px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.location-name {
  font-size: 34px;
  color: #333;
  width: 500px;
  lines: 1;
  text-overflow: ellipsis;
}


.location-address {
  font-size: 24px;
  line-height: 30px;
  color: #666;
  width: 500px;
  lines: 1;
  text-overflow: ellipsis;
}
.map {
  flex: 1;
}
.map-tool {
  display: flex;
  justify-content: spa