集成到 Vue

使用原生 amap

  1. 配置 vue.config.js
module.exports = {
  configureWebpack: (config) => {
    config.externals = {
      'AMap': 'AMap'
    }
  },
}
  1. public/index.html 中加入
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=xxx"></script>
  1. 在组件中使用
<template lang="pug">
#container(style="height:800px")
</template>
<script>
import AMap from 'AMap'
export default {
  mounted() {
    let map = new AMap.Map('container', {
      center: [102.649377, 25.261306],
      resizeEnable: true,
      zoom: 10,
      lang: 'en'
    })
    AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function() {
      map.addControl(new AMap.ToolBar())
      map.addControl(new AMap.Scale())
    })
  }
}
</script>

Typescript:

<template lang="pug">
#container(style="height:800px")
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
// @ts-ignore
import AMap from 'AMap'
@Component
export default class MapTest extends Vue {
  mounted() {
    let map = new AMap.Map('container', {
      center: [102.649377, 25.261306],
      resizeEnable: true,
      zoom: 10
    })
    let marker = new AMap.Marker({
      position: [102.649377, 25.261306]// 位置
    })
    map.add(marker)// 添加到地图
  }
}
</script>

使用 vue-amap

使用 vue-amap 可以很方便地在 Vue 中集成高德地图

  1. 安装
$ yarn add vue-amap
  1. 在 main.js 中配置
import AMap from 'vue-amap'
Vue.use(AMap)
AMap.initAMapApiLoader({
  key: 'xxx',
  plugin: [
    'AMap.Autocomplete',
    'AMap.PlaceSearch',
    'AMap.Scale',
    'AMap.OverView',
    'AMap.ToolBar',
    'AMap.MapType',
    'AMap.PolyEditor',
    'AMap.CircleEditor'
  ],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4'
})
  1. 在组件中使用
<template lang="pug">
div
  .amap-wrapper
    el-amap.amap-box(:vid="'amap-vue'")
</template>
<script>
export default {}
</script>
<style>
.amap-wrapper {
  width: 500px;
  height: 500px;
}
</style>

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress