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

一、功能需求

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

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

二、准备

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

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

三、在webstorm中安装 

     

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

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

        在eslintrc.js中加入配置:

       

  globals:{
    "AMap": "true"
  }

五、正式开发

1.创建页面

<template>
  <div>
    <label>消息管理</label>
    <div style="margin-top: 20px">
      <div style="height:520px;">
        <div id="all" style="height:100%">
          <div class="posInput">
            <el-input style="width:100%"
                      id="tipinput"
                      class="form-control input-style"
                      type="text"
                      placeholder="请输入搜索地址"
                      prefix-icon="el-icon-search"
                      v-model="formatAdress"
            >
            </el-input>
          </div>
          <div id="allmap"></div>
          <div class="posSubmit">
            <el-form  ref="form"  label-width="85px" >
              <div class="btn_box" >
                <el-form-item label="经度:" >
                  <el-input style="width:400px" disabled class="form-control input-style" type="text" v-model="longitude"> </el-input>
                </el-form-item>
                <el-form-item label=