快應用 map教程

2020-08-08 15:25 更新
了解如何使用地圖組件

通過本節(jié)，你將學會：

顯示地圖組件

示例代碼：

<template>
  <div>
    <map
      style="width:{{width}}; height:{{height}}"
      latitude="{{latitude}}"
      longitude="{{longitude}}"
      scale="{{scale}}"
      coordtype="{{coordtype}}"
    >
    </map>
  </div>
</template>
<script>
  const BEI_JING_WGS = {
    latitude: 39.9073728469,
    longitude: 116.3913445961,
    coordType: 'wgs84'
  }
  export default {
    private: {
      width: '100%',
      height: '50%',
      latitude: BEI_JING_WGS.latitude,
      longitude: BEI_JING_WGS.longitude,
      coordtype: BEI_JING_WGS.coordType,
      scale: 17
    }
  }
</script>

該示例演示了如何自定義地圖組件的寬高、調整地圖組件的中心位置以及縮放級別。

示例截圖：

map_show

展示 marker, groundoverlay 等覆蓋物

地圖組件當前支持四種覆蓋物，包括：marker、groundoverlay、polyline 和 circle。

示例代碼：

<template>
  <div>
    // 地圖中心默認是北京
    <map
      style="width:{{width}}; height:{{height}}"
      scale="{{scale}}"
      coordtype="{{coordtype}}"
      markers="{{markers}}"
      groundoverlays="{{groundoverlays}}"
      polylines="{{polylines}}"
      circles="{{circles}}"
    >
    </map>
  </div>
</template>
<script>
  const COORDTYPE = 'wgs84'
  const BEI_JING_WGS = {
    latitude: 39.9073728469,
    longitude: 116.3913445961,
    coordType: COORDTYPE
  }
  const POINT1 = {
    latitude: 39.9069550115,
    longitude: 116.3932842749,
    coordType: COORDTYPE
  }
  const POINT2 = {
    latitude: 39.904169422,
    longitude: 116.3893937341,
    coordType: COORDTYPE
  }
  export default {
    private: {
      width: '100%',
      height: '50%',
      scale: 17,
      coordtype: COORDTYPE,
      markers: [
        {
          latitude: BEI_JING_WGS.latitude,
          longitude: BEI_JING_WGS.longitude,
          coordType: BEI_JING_WGS.coordType,
          iconPath: '/Common/marker.png',
          width: '100px'
        }
      ],
      groundoverlays: [
        {
          northEast: POINT1,
          southWest: POINT2,
          iconPath: '/Common/logo.png',
          opacity: 0.5
        }
      ],
      polylines: [{ points: [POINT1, POINT2] }],
      circles: [
        {
          latitude: POINT1.latitude,
          longitude: POINT2.longitude,
          coordType: COORDTYPE,
          radius: 50
        }
      ]
    }
  }
</script>

該示例演示了如何在地圖組件上添加覆蓋物。

示例截圖：

map_overlays

展示 marker 的 callout 氣泡

marker 可以通過點擊或者常顯的方式顯示一個文本為用來描述和對應 marker 相關的信息。

示例代碼：

<template>
  <div>
    <map
      style="width:{{width}}; height:{{height}}"
      scale="{{scale}}"
      markers="{{markers}}"
    >
    </map>
  </div>
</template>
<script>
  const COORDTYPE = 'wgs84'
  const MARKER_PATH = '/Common/marker.png'
  const BEI_JING_WGS = {
    latitude: 39.9073728469,
    longitude: 116.3913445961,
    coordType: COORDTYPE
  }
  export default {
    private: {
      scale: 17,
      markers: [
        {
          width: '100%',
          height: '50%',
          latitude: BEI_JING_WGS.latitude,
          longitude: BEI_JING_WGS.longitude,
          coordType: BEI_JING_WGS.coordType,
          iconPath: MARKER_PATH,
          width: '100px',
          callout: {
            content: '這里是\n北京',
            padding: '20px 5px 20px 5px',
            borderRadius: '20px',
            textAlign: 'left',
            display: 'always'
          }
        }
      ]
    }
  }
</script>

該示例展示了在對應的 marker 上展示常顯文本氣泡。

由于文本氣泡是無法自定義寬高的，即氣泡根據(jù)文本內容自適應寬高，那么也就說明textAlign屬性，只有文本內容中包含換行符（"\n"）的時候，才會有直觀的可視效果。

示例截圖：

map_marker_callout

marker 的移動

地圖組件可以實現(xiàn)指定 marker 的移動動畫。

示例代碼：

<template>
  <div>
    <map
      style="width:{{width}}; height:{{height}}"
      id="map"
      scale="{{scale}}"
      markers="{{markers}}"
      polylines="{{polylines}}"
      @tap="tap"
    >
    </map>
  </div>
</template>
<script>
  const POINT1 = { latitude: 39.9090371069, longitude: 116.3953853161 }
  const POINT2 = { latitude: 39.9089550115, longitude: 116.3992842749 }
  export default {
    private: {
      width: '100%',
      height: '50%',
      scale: 17,
      markers: [
        {
          id: 1,
          latitude: POINT1.latitude,
          longitude: POINT1.longitude,
          anchor: { x: 0.5, y: 0.5 },
          iconPath: '../Common/carA.png',
          width: '100px'
        }
      ],
      polylines: [{ points: [POINT1, POINT2] }]
    },
    tap() {
      this.$element('map').translateMarker({
        markerId: 1,
        destination: POINT2,
        autoRotate: true,
        duration: 5000
      })
    }
  }
</script>

該示例展示了 marker 在地圖組件中的移動。marker 的圖標是一輛小車，在起點位置沒有任何的旋轉，點擊地圖，觸發(fā)小車向目標地點移動，并且在移動過程中，小車的圖標自動進行旋轉，始終保持車頭朝向目標地點。

示例截圖：

map_car

添加自定義控件

開發(fā)者能夠在地圖組件上添加可以響應點擊事件的自定義控件。

示例代碼：

<template>
  <div>
    <map
      style="width:{{width}}; height:{{height}}"
      id="map"
      scale="{{scale}}"
      controls="{{controls}}"
      @controltap="controlTap"
    >
    </map>
  </div>
</template>
<script>
  import prompt from '@system.prompt'
  export default {
    private: {
      width: '100%',
      height: '50%',
      scale: 17,
      controls: [
        {
          id: 1,
          position: { right: '15px', bottom: '300px', width: '70px' },
          iconPath: '/Common/plus.png'
        },
        {
          id: 2,
          position: { right: '15px', bottom: '200px', width: '70px' },
          iconPath: '/Common/minus.png'
        }
      ]
    },
    controlTap(res) {
      switch (res.controlId) {
        case 1:
          this.scale++
          // 因為地圖縮放級別有上限，防止持續(xù)生成無效值
          this.$element('map').getScale({
            success: res => {
              this.scale = res.scale
            }
          })
          prompt.showToast({ message: '控件：放大地圖' })
          break
        case 2:
          this.scale--
          // 因為地圖縮放級別有下限，防止持續(xù)生成無效值
          this.$element('map').getScale({
            success: res => {
              this.scale = res.scale
            }
          })
          prompt.showToast({ message: '控件：縮小地圖' })
          break
        default:
          break
      }
    }
  }
</script>

該示例在地圖組件上放置了兩個用來放大和縮小地圖顯示級別的控件按鈕，點擊控件按鈕，觸發(fā)地圖組件的控件點擊事件，通過 id 識別被點擊的控件，然后分別進行邏輯處理。

示例截圖：

map_controls

實現(xiàn)最佳視口

開發(fā)者可以實現(xiàn)在地圖組件的可視范圍內顯示給定的系列坐標點，當?shù)貓D組件上有控件或者其他快應用組件遮擋的時候，使用?includePoints()?方法并在參數(shù)對象上加一個 padding 屬性，可以對顯示區(qū)域進一步進行約束。

示例代碼：

<template>
  <div>
    <!-- includepoints 屬性設置-->
    <map style="width:{{width}}; height:{{height}}" id="map" includepoints="{{includepoints}}" markers="{{markers}}" @loaded="loaded">

    <!-- includepoints 方法設置-->
     <map style="width:{{width}}; height:{{height}}" id="map"  markers="{{markers}}" @loaded="loaded">
    </map>
  </div>
</template>
<script>
  const COMMON_MARKER = { iconPath: "/Common/marker.png", width: "30px" }
  const POINT1 = { latitude: 39.9090371069, longitude: 116.3953853161 }
  const POINT2 = { latitude: 39.9089550115, longitude: 116.3992842749 }
  const POINT3 = { latitude: 39.9061293143, longitude: 116.3995796987 }
  const POINT4 = { latitude: 39.9061694220, longitude: 116.3953937341 }
  const POINTS_LIST = [POINT1, POINT2, POINT3, POINT4]
  export default {
    private: {
      width: "100%",
      height: "50%",
      markers: null,
      includepoints: null
    },
    onInit() {
      this.markers = POINTS_LIST.map(item => Object.assign({}, COMMON_MARKER, item))
    },
    loaded() {
      // 方法和屬性實現(xiàn)，二者取其一

      // includepoints 屬性設置最佳視口
      this.includepoints = POINTS_LIST

      // includepoints 方法設置最佳視口
      // this.$element("map").includePoints({ points: POINTS_LIST })
    }
  }
</script>

該示例演示了如何在地圖組件整個可視范圍內，展示所有給定的坐標點（給定坐標點都已經用小 marker 指出）。

除了屬性可以實現(xiàn)這樣的效果，也可以通過?includePoints()?方法實現(xiàn)，參見示例中被注釋的代碼部分。

需要注意的是，無論是屬性還是方法，需要地圖渲染完畢才能生效，因此示例代碼中是在?loaded?事件方法中實現(xiàn)的。

示例截圖：

map_view_port

展示當前位置

示例代碼：

<template>
  <div>
    <map
      style="width:{{width}}; height:{{height}}"
      id="map"
      showmylocation="{{showmylocation}}"
      @tap="tap"
    >
    </map>
  </div>
</template>
<script>
  export default {
    private: {
      width: '100%',
      height: '50%',
      scale: 17,
      showmylocation: true
    },
    tap() {
      this.$element('map').moveToMyLocation()
    }
  }
</script>

該示例演示了如何通過屬性和方法的方式展示當前位置。

showmylocation屬性被置為 true 的時候，地圖組件的可視中心會調整到移動設備的當前位置，并且顯示定位 UI，包括定位點、移動設備朝向箭頭以及定位精度范圍指示圈。

moveToMyLocation()方法只會將地圖組件的可視中心調整到移動設備當前位置。

坐標系及其轉換

在使用地圖組件過程中，坐標參數(shù)的坐標系如果和當前地圖的坐標系不一致，則需要進行坐標轉換。

快應用地圖組件支持的坐標系可通過 getSupportedCoordTypes 獲??；當前的地圖中心位置的坐標系可以通過 getCoordType 獲取。

對坐標進行坐標系轉換有顯式和隱式兩種方式： 顯式坐標轉換使用 convertCoord 方法，需要注意的是 from 到 to 的轉換可能不支持，這種情況下會 fail 回調會執(zhí)行； 隱式坐標轉換只需要在屬性或者接口里的 coordType 參數(shù)里傳入坐標點參數(shù)的坐標系，由地圖組件進行隱式轉換，自動轉換到當前地圖位置的坐標系，如果轉換不支持，或者不設置 coordType，則使用原始坐標。

示例代碼：

<template>
  <div>
    <map
      style="width:{{width}}; height:{{height}}"
      id="map"
      scale="{{scale}}"
      markers="{{markers}}"
    >
    </map>
  </div>
</template>
<script>
  const MARKER_PATH = '/Common/marker.png'
  const BEI_JING_WGS = { latitude: 39.9077798469, longitude: 116.3912285961 }
  export default {
    private: {
      width: '100%',
      height: '50%',
      scale: 16,
      markers: null
    },
    onShow() {
      var wgsPoint = {
        latitude: BEI_JING_WGS.latitude,
        longitude: BEI_JING_WGS.longitude,
        coordType: 'wgs84',
        iconPath: MARKER_PATH,
        width: '50px'
      }

      this.$element('map').convertCoord({
        from: 'wgs84',
        to: 'gcj02',
        latitude: BEI_JING_WGS.latitude,
        longitude: BEI_JING_WGS.longitude,
        success: res => {
          var gcjPoint = {
            latitude: res.latitude,
            longitude: res.longitude,
            rotate: 180,
            iconPath: MARKER_PATH,
            width: '50px'
          }
          this.markers = [gcjPoint, wgsPoint]
        }
      })
    }
  }
</script>

該示例演示了如何利用地圖組件的方法對特定坐標進行坐標轉換，并且在地圖上使用 marker 將這兩個不在同一個坐標系下的坐標點標識出來，可以看出來，這兩個坐標標識的是同一個點。

坐標轉換方法 from 目前僅支持?wgs84?。

示例截圖：

map_coordtype

其他方法、事件的使用

地圖組件還有部分方法、事件，在這個里進行示例說明。

如下示例演示了地圖組件 getCenterLocation(獲取地圖中心點坐標)、getRegion(獲取當前地圖視野范圍)、getSupportedCoordTypes(獲取地圖當前支持的坐標系)、getCoordType(獲取地圖當前使用的坐標系)方法的使用。

示例代碼：

<template>
  <div class="tutorial-page">
    <map id="map" style="width:{{width}}; height:{{height}}" latitude="{{latitude}}" longitude="{{longitude}}" scale="{{scale}}"
      coordtype="{{coordtype}}">
    </map>
    <div class="tutorial-method">
      <input type="button" value="獲取中心點坐標" class="btn" @click="getCenterLocation"></input>
      <text class="item-title">{{centerlocation}}</text>
      <input type="button" value="獲取當前視野范圍" class="btn" @click="getRegion"></input>
      <text class="item-title">{{region}}</text>
      <input type="button" value="獲取當前map支持的坐標系" class="btn" @click="getSupportedCoordTypes"></input>
      <text class="item-title">{{supportedcoordtypes}}</text>
      <input type="button" value="獲取當前坐標系" class="btn" @click="getCoordType"></input>
      <text class="item-title">{{coordtypeformap}}</text>
    </div>
  </div>
</template>

<style>
  .btn {
    height: 80px;
    text-align: center;
    border-radius: 5px;
    margin-top: 20px;
    margin-right: 20px;
    margin-left: 120px;
    color: #ffffff;
    font-size: 30px;
    background-color: #0faeff;
  }

  .item-title {
    border-radius: 5px;
    margin-right: 20px;
    margin-left: 120px;
    color: #000000;
  }

  .tutorial-page {
    flex-direction: column;
    flex: 1;
  }

  .tutorial-method {
    flex-direction: column;
    flex: 1;
  }
</style>

<script>
  export default {
    private: {
      width: "100%",
      height: "50%",
      scale: 17,
      centerlocation: "",
      region: "",
      supportedcoordtypes: "",
      coordtypeformap: ""
    },
    getCenterLocation() {
      this.$element('map').getCenterLocation({
        success: res => {
          this.centerlocation = `中心點緯度：${res.latitude}\n中心點經度：${res.longitude}`
        }
      })
    },
    getRegion() {
      this.$element('map').getRegion({
        success: res => {
          this.region = `西南角：\n${res.southwest.latitude},${res.southwest.longitude}\n東北角：\n${res.northeast.latitude},${res.northeast.longitude}`
        }
      })
    },
    getSupportedCoordTypes() {
      this.$element('map').getSupportedCoordTypes({
        success: res => { this.supportedcoordtypes = res.coordTypes; }
      })
    },
    getCoordType: function () {
      this.$element('map').getCoordType({
        success: res => { this.coordtypeformap = res.coordType; }
      })
    }
  }
</script>

示例截圖：

map_more_method

如下示例演示了地圖組件 regionchange(視野發(fā)生變化)、markertap(點擊地圖標記點)、callouttap(點擊標記點對應彈窗)事件的使用。

示例代碼：

<template>
  <div class="tutorial-page">
    <map
      scale="{{scale}}"
      style="width:{{width}}; height:{{height}}"
      markers="{{markers}}"
      @regionchange="regionchange"
      @markertap="markerTap"
      @callouttap="calloutTap"
    >
    </map>
    <div class="tutorial-event">
      <text class="item-title">{{regionchangetip}}</text>
      <text class="item-title">{{markertaptip}}</text>
      <text class="item-title">{{callouttaptip}}</text>
    </div>
  </div>
</template>

<style>
  .item-title {
    border-radius: 5px;
    margin-right: 20px;
    margin-left: 120px;
    margin-top: 20px;
    color: #000000;
  }

  .tutorial-page {
    flex-direction: column;
    flex: 1;
  }

  .tutorial-event {
    flex-direction: column;
    flex: 1;
  }
</style>

<script>
  const COORDTYPE = 'wgs84'
  const MARKER_PATH = '/Common/marker.png'
  const BEI_JING_WGS = {
    latitude: 39.9073728469,
    longitude: 116.3913445961,
    coordType: COORDTYPE
  }
  export default {
    private: {
      scale: 17,
      width: '100%',
      height: '50%',
      markers: [
        {
          id: 1020,
          latitude: BEI_JING_WGS.latitude,
          longitude: BEI_JING_WGS.longitude,
          coordType: BEI_JING_WGS.coordType,
          iconPath: MARKER_PATH,
          width: '100px',
          callout: {
            content: '這里是\n北京',
            padding: '20px 5px 20px 5px',
            borderRadius: '20px',
            textAlign: 'left',
            display: 'always'
          }
        }
      ],
      regionchangetip: '',
      markertaptip: '',
      callouttaptip: ''
    },
    regionchange(res) {
      this.regionchangetip = `地圖視野發(fā)生變化\n西南角：\n${
        res.southwest.latitude
      },${res.southwest.longitude}\n東北角：\n${res.northeast.latitude},${
        res.northeast.longitude
      }`
    },
    markerTap(res) {
      this.markertaptip = `Marker被點擊, id：${res.markerId}`
    },
    calloutTap(res) {
      this.callouttaptip = `Callout被點擊, marker id：${res.markerId}`
    }
  }
</script>

示例截圖：

map_more_event


以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號