vue中高德地图使用

vue中高德地图使用

一、高德开放平台申请key

1.高德开放平台注册。

2.创建新应用

3.添加key，选择 Web端(JS API)

二、项目中引用key

引用前先安装vue-amap插件

npm install vue-amap --save

main.js 引入相关配置

import VueAMap from 'vue-amap';

Vue.use(VueAMap);

VueAMap.initAMapApiLoader({
  key: '9ad8bf7988917eb78fe035b499f8151c', // 你申请得key
  plugin: [
    'AMap.Geocoder',
    'AMap.Autocomplete', // 输入提示插件
    'AMap.PlaceSearch', // POI搜索插件
    'AMap.Scale', // 右下角缩略图插件 比例尺
    'AMap.OverView', // 地图鹰眼插件
    'AMap.ToolBar', // 地图工具条
    'AMap.MapType', // 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    'AMap.PolyEditor', // 编辑 折线多，边形
    'AMap.CircleEditor', // 圆形编辑器插件
    'AMap.Geolocation', // 定位控件，用来获取和展示用户主机所在的经纬度位置
    "AMap.AMapUI",// UI组件
  ],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4',
});

index.html 添加 加载高德地图 JavaScript API 的配置和脚本

    <script type="text/javascript">
      window._AMapSecurityConfig = {
      securityJsCode:'34e5046bdba86e89c9f2c8992d943cac', // 你申请key对应得密钥
    }
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?key=9ad8bf7988917eb78fe035b499f8151c&v=1.4.4&plugin=AMap.Geolocation,AMap.Autocomplete,AMap.PlaceSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MapType,AMap.PolyEditor,AMap.CircleEditor,AMap.Geocoder"></script> 
    <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>

三、地图组件使用

map.vue

// 组件封装
<template>
  <div class="content">
    <div class="amap-wrapper">
      <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
      <el-amap class="amap-box" :zoom="zoom" :center="center" :events="events" :mapStyle="mapStyle">
        <el-amap-marker v-for="(marker, i) in markers" :key="i" :position="marker"></el-amap-marker>
      </el-amap>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    mapCenter: { type: Array, default: [117.227244, 31.82138] },
    mapMarkers: { type: Array, default: [[117.227244, 31.82138]] },
  },
  data() {
    let _this = this
    return {
      center: [117.227244, 31.82138], //地图中心点坐标 合肥市区
      zoom: 12, //初始化地图显示层级
      mapStyle: 'amap://styles/8b6be8ec497009e17a708205348b899a', //设置地图样式
      markers: [[117.227244, 31.82138]],
      searchOption: {
        city: '全国',
        citylimit: true
      },
      address: '合肥市',
      lng: 117.227244,
      lat: 31.82138,
      events: {
        init: (o) => {},
        moveend: () => {},
        zoomchange: () => {},
        click: (e) => {
          let { lng, lat } = e.lnglat
          this.center = [lng, lat]
          this.markers = [[lng, lat]]
          this.lng = lng
          this.lat = lat
          // 这里通过高德 SDK 完成。
          var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: 'all'
          })
          geocoder.getAddress([lng, lat], function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
              if (result && result.regeocode) {
                _this.address = result.regeocode.formattedAddress
                _this.$emit('getAddress', lng, lat, _this.address)
              }
            }
          })
        }
      }
    }
  },
  created() {
    this.center = this.mapCenter
    this.markers = this.mapMarkers
  },

  methods: {
    addMarker: function () {
      this.markers = []
      let lng = 121.5 + Math.round(Math.random() * 1000) / 10000
      let lat = 31.197646 + Math.round(Math.random() * 500) / 10000
      this.markers = [[lng, lat]]
    },
    onSearchResult(pois) {
      if (pois.length > 0) {
        let center = pois[0]
        this.lng = center.lng
        this.lat = center.lat
        this.address = center.name
        this.center = [center.lng, center.lat]
        this.markers = [[center.lng, center.lat]]
        this.$emit('getAddress', this.lng, this.lat, this.address)
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.content {
  width: 800px;
  height: 350px;
  border: 1px solid #999999;
}
.search-box {
  position: absolute;
  top: 0px;
  left: 0px;
}
.amap-wrapper {
  width: 100%;
  // height: 500px;
  height: 100%;
  position: relative;
}
</style>