Vue.js 加入高德地图的实现方法

一、功能需求

1.根据输入内容进行模糊查询，选择地址后在地图上插上标记，并更新经纬度坐标显示

2.在地图点击后，根据回传的左边更新地址信息和坐标显示

二、准备

1.申请高德地图账号，创建应用

 2.在应用管理中 获得key 和安全密钥

三、在webstorm中安装 

npm i @amap/amap-jsapi-loader -S

四、防止在使用中AMap无法识别问

        在eslintrc.js中加入配置:

1.  
   globals:{
2.  
   "AMap": "true"
3.  
   }

五、正式开发

1.创建页面

1.  
   <template>
2.  
   <div>
3.  
   <label>消息管理</label>
4.  
   <div style="margin-top: 20px">
5.  
   <div style="height:520px;">
6.  
   <div id="all" style="height:100%">
7.  
   <div class="posInput">
8.  
   <el-input style="width:100%"
9.  
   id="tipinput"
10.  
    class="form-control input-style"
11.  
    type="text"
12.  
    placeholder="请输入搜索地址"
13.  
    prefix-icon="el-icon-search"
14.  
    v-model="formatAdress"
15.  
    >
16.  
    </el-input>
17.  
    </div>
18.  
    <div id="allmap"></div>
19.  
    <div class="posSubmit">
20.  
    <el-form ref="form" label-width="85px" >
21.  
    <div class="btn_box" >
22.  
    <el-form-item label="经度:" >
23.  
    <el-input style="width:400px" disabled class="form-control input-style" type="text" v-model="longitude"> </el-input>
24.  
    </el-form-item>
25.  
    <el-form-item label="纬度:" >
26.  
    <el-input style="width:400px" disabled class="form-control input-style" type="text" v-model="latitude"> </el-input>
27.  
    </el-form-item>
28.  
    </div>
29.  
    </el-form>
30.  
    </div>
31.  
    </div>
32.  
    </div>
33.  
    </div>
34.  
    </div>
35.  
    </template>

2.页面样式

1.  
   <style scoped>
2.  
   #all{
3.  
   position: relative;
4.  
   }
5.  
   #allmap{
6.  
   width: 100%; height: calc(100% - 50px);
7.  
   font-family: "微软雅黑";
8.  
   }
9.  
   .posInput{
10.  
    position: absolute;
11.  
    z-index: 1;
12.  
    width: 80%;
13.  
    margin-top: 20px; margin-left: 10%;
14.  
    }
15.  
    .posSubmit{
16.  
    position: absolute; z-index: 1; bottom: 0;
17.  
    margin-left: 5%;
18.  
    width: 90%;
19.  
    display: flex; justify-content: flex-start; align-items: center;
20.  
    }
21.  
    .btn_box{
22.  
    width: 100%;
23.  
    height: 100%;
24.  
    display: flex; ; align-items: center;
25.  
    }
26.  
    ::v-deep .el-form-item{
27.  
    margin-bottom: 0 !important;
28.  
    }
29.  
    </style>

3.存储的数据项

1.  
   data () {
2.  
   return {
3.  
   map: null,
4.  
   marker: null,
5.  
   startSeacrh: [],
6.  
   stratInfo: {},
7.  
   dprops: {
8.  
   zoom: 15
9.  
   },
10.  
    formatAdress: '',
11.  
    longitude: '', // 经度
12.  
    latitude: '', // 纬度
13.  
    }
14.  
    }

4.创建地图方法

1.  
   mounted () {
2.  
   this.initMap()
3.  
   },
4.  
   methods: {
5.  
   initMap () {
6.  
   const that = this
7.  
   init('allmap', that.dprops).then(AMap => {
8.  
   that.map = AMap
9.  
   that.map.on('click', that.clickHandler) // 地图点击事件 可获取经纬度等信息
10.  
    initScaleTools(that.map, true, false)
11.  
    searchAutocomplete(that.map, 'tipinput', function (event) {
12.  
    that.handleStartSelect(event)
13.  
    })
14.  
    }).catch(err => {
15.  
    this.$message.error(err)
16.  
    })
17.  
    },
18.  
    clickHandler (event) {
19.  
    console.log(event, '起点经纬度 [lng,lat]')
20.  
    if (event.lnglat === '') {
21.  
    this.$message({
22.  
    type: 'warning',
23.  
    message: '该地点无经纬度数据，请输入具体一点的地点!',
24.  
    duration: 5 * 1000
25.  
    })
26.  
    return
27.  
    }
28.  
    if (this.marker) {
29.  
    this.map.remove(this.marker)
30.  
    this.marker = null
31.  
    }
32.  
    this.startSeacrh = []
33.  
    this.startSeacrh = [event.lnglat.lng, event.lnglat.lat]
34.  
    this.marker = new AMap.Marker({
35.  
    position: this.startSeacrh
36.  
    })
37.  
    this.map.add(this.marker)
38.  
    this.map.setCenter(this.startSeacrh)
39.  
    this.longitude = event.lnglat.lng
40.  
    this.latitude = event.lnglat.lat
41.  
    let that = this
42.  
    getAddressByLngLat(this.startSeacrh, function (status, result) {
43.  
    if (status === 'complete') {
44.  
    that.formatAdress = result.regeocode.formattedAddress
45.  
    let adrComponent = result.regeocode.addressComponent
46.  
    that.stratInfo = {
47.  
    district: adrComponent.province,
48.  
    address: adrComponent.district,
49.  
    name: adrComponent.township adrComponent.street adrComponent.streetNumber,
50.  
    fullAdr: result.regeocode.formattedAddress
51.  
    }
52.  
    }
53.  
    })
54.  
    },
55.  
    handleStartSelect (event) {
56.  
    console.log(event, '起点经纬度 [lng,lat]')
57.  
    if (event.poi.location === '') {
58.  
    this.$message({
59.  
    type: 'warning',
60.  
    message: '该地点无经纬度数据，请输入具体一点的地点!',
61.  
    duration: 5 * 1000
62.  
    })
63.  
    return
64.  
    }
65.  
    if (this.marker) {
66.  
    this.map.remove(this.marker)
67.  
    this.marker = null
68.  
    }
69.  
    this.startSeacrh = []
70.  
    this.startSeacrh = [event.poi.location.lng, event.poi.location.lat]
71.  
    this.formatAdress = event.poi.district event.poi.address event.poi.name
72.  
    this.longitude = event.poi.location.lng
73.  
    this.latitude = event.poi.location.lat
74.  
    this.marker = new AMap.Marker({
75.  
    position: this.startSeacrh
76.  
    })
77.  
    this.map.add(this.marker)
78.  
    this.map.setCenter(this.startSeacrh)
79.  
    this.stratInfo = {
80.  
    district: event.poi.district,
81.  
    address: event.poi.address,
82.  
    name: event.poi.name,
83.  
    fullAdr: this.formatAdress
84.  
    }
85.  
    }
86.  
    }

5.封装好的js文件方法

  initMap.js

1.  
   import AMapLoader from '@amap/amap-jsapi-loader'
2.  
   window._AMapSecurityConfig = {
3.  
   securityJsCode: '安全密钥'
4.  
   }
5.  
   const initMap = async (config) => {
6.  
   return new Promise((resolve, reject) => {
7.  
   AMapLoader.load({
8.  
   'key': config.key,
9.  
   'version': '1.4.15',
10.  
    'plugins': [
11.  
    'AMap.PolygonEditor' // 插件
12.  
    ],
13.  
    'AMapUI': {
14.  
    'version': '1.1',
15.  
    'plugins': []
16.  
    },
17.  
    'Loca': {
18.  
    'version': '1.3.2'
19.  
    }
20.  
    }).then((AMap) => {
21.  
    resolve(AMap)
22.  
    }).catch(err => {
23.  
    reject(err)
24.  
    })
25.  
    })
26.  
    }
27.  
    export default initMap

map.js

1.  
   import initMap from './initMap.js'
2.  
   export const init = (container, props) => {
3.  
   const config = {
4.  
   key: 'key'
5.  
   }
6.  
   return new Promise((resolve, reject) => {
7.  
   initMap(config).then(AMap => {
8.  
   resolve(new AMap.Map(container, { ...props }))
9.  
   }).catch(err => {
10.  
    reject(err)
11.  
    })
12.  
    })
13.  
    }
14.  
    /**
15.  
    * @param {*} map 地图实例
16.  
    * @param {Boolean} noScale 不需要比例尺 true表示不需要
17.  
    * @param {Boolean} noToolBar 不需要工具栏 true表示不需要
18.  
    */
19.  
    export const initScaleTools = (map, noScale, noToolBar) => {
20.  
    if (!noScale) {
21.  
    map.plugin(['AMap.Scale'], function () {
22.  
    var scale = new AMap.Scale()
23.  
    map.addControl(scale)
24.  
    })
25.  
    }
26.  
    if (!noToolBar) {
27.  
    map.plugin(['AMap.ToolBar'], function () {
28.  
    var tool = new AMap.ToolBar()
29.  
    map.addControl(tool)
30.  
    })
31.  
    }
32.  
    }
33.  
    //模糊查询
34.  
    export const searchAutocomplete = (map, keyword, commpletHandle) => {
35.  
    map.clearMap()
36.  
    AMap.plugin(['AMap.PlaceSearch', 'AMap.Autocomplete'], function () {
37.  
    let autoOptions1 = { input: keyword, city: '全国' }
38.  
    let startAutoComplete = new AMap.Autocomplete(autoOptions1)
39.  
    AMap.PlaceSearch({
40.  
    map: map
41.  
    })
42.  
    AMap.event.addListener(startAutoComplete, 'select', commpletHandle)
43.  
    })
44.  
    }
45.  
     
46.  
    /**
47.  
    *
48.  
    * @param {String} LngLat 经纬度
49.  
    * @param {Function} callback 回调函数
50.  
    * @param {Object} otherProps 其他参数
51.  
    */
52.  
    export const getAddressByLngLat = (LngLat, callback, otherProps) => {
53.  
    AMap.plugin('AMap.Geocoder', function () {
54.  
    let geocoder = new AMap.Geocoder({
55.  
    ...otherProps
56.  
    })
57.  
     
58.  
    geocoder.getAddress(LngLat, function (status, result) {
59.  
    callback(status, result)
60.  
    })
61.  
    })
62.  
    }
63.  
     
64.  
    const mapJS = {
65.  
    init,
66.  
    initScaleTools,
67.  
    searchAutocomplete,
68.  
    getAddressByLngLat
69.  
    }
70.  
    export default mapJS

在文件中导入 map.js方法

1.  
   import {
2.  
   init,
3.  
   initScaleTools,
4.  
   searchAutocomplete,
5.  
   getAddressByLngLat
6.  
   } from '../../utils/map'

六、步骤总结

1.在mounted（）中调用 initMap ()初始化地图

2.初始化成功后、添加事件监听：地图点击、模糊查询。添加放大缩小工具栏

1.  
   init('allmap', that.dprops).then(AMap => {
2.  
   that.map = AMap
3.  
   that.map.on('click', that.clickHandler) // 地图点击事件 可获取经纬度等信息
4.  
   initScaleTools(that.map, true, false)
5.  
   searchAutocomplete(that.map, 'tipinput', function (event) {
6.  
   that.handleStartSelect(event)
7.  
   })
8.  
   })

七：效果

这篇好文章是转载于：学新通技术网