高德地图地理位置展示

需求：如下图 点击element的表格的地址打开一个弹框展示地理位置，不需要搜索框。

上代码

页面引用高德地图部分

//引入获取实例import { AMapManager } from "vue-amap";let amapManager = new AMapManager();

pubilc 下 index.html

<script type="text/javascript"> 
window._AMapSecurityConfig = { securityJsCode:'你的安全密钥', } </script>   
 <script type="text/javascript" 
src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图申请的key&
plugin=AMap.Geocoder,AMap.Geolocation,AMap.PolyEditor,AMap.
PlaceSearch,AMap.Autocomplete">
</script>

html 部分

<el-table-column label="地址" align="center" prop="duAddress"> 
       <template slot-scope="scope"> 
         <spanstyle="cursor: pointer"
          @click="onSearchAddress(scope.row.duAddress)">    
        {{ scope.row.duAddress }}
        </span> 
     <i class="el-icon-location"          
      style="color: #2384eb; cursor: pointer; font-size: 16px"     
       @click="onSearchAddress(scope.row.duAddress)" >
        </i>       
 </template>      
</el-table-column>

弹框部分

 <!-- 地图 -->   
 <el-dialog 
    title="地理位置"
     :visible.sync="dialogVisible" width="50%">   
   <div class="map_address">     
   <div class="address-wrapper" :style="{ width: '100%', height: '100%' }">       
     <el-amap       
         vid="amap"           
         class="amap-demo"        
        :amap-manager="amapManager"    
        :center="center"        
        :zoom="zoom">       
         <el-amap-marker         
             v-for="(marker, index) in markers"       
               :key="'marker' + index"            
              :position="marker">        
        </el-amap-marker>        
     </el-amap>       
     </div>    
  </div>   
 </el-dialog>

data数据

 data() {   
 const self = this;  
  return {    
  center: [0, 0],    
  loaded: false,    
  zoom: 17,    
  input: "",   
  lng: 0,    
  lat: 0,    
  amapManager,   
  searchOption: {        city: "全国",        citylimit: false,      },    
  markers: [], //标记
}

methond 方法

onSearchAddress(e) {    
  this.dialogVisible = true;    
  console.log(e);     
 AMap.plugin("AMap.Geocoder", () => {    
    var geocoder = new AMap.Geocoder({       
   // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode    
      city: e,        });      
  geocoder.getLocation(e, (status, result) => {         
     if (status === "complete" && result.info === "OK") {    
        // result中对应详细地理坐标信息                       
   this.center = [result.geocodes[0].location.lng,result.geocodes[0].location.lat,];    
   this.markers.push([ result.geocodes[0].location.lng,result.geocodes[0].location.lat]); 
    //把搜索的位置的第一个值
    }      
      });    
      });   
 },

如果需要搜索功能