vueプロジェクトは高徳地図の位置付けとキーワード検索機能の実例コードを使用しています（ピット経験）

1.まずindex.で高徳地図の秘密鍵を導入する。図のように:

注意：キーワード検索機能を使う場合は plugin=AMap.Autocomplete,AMap.PlaceSearchを追加します。そうでないと機能が使えなくなり、エラーが発生します。
2.位置決め機能、コードは以下の通りです。

const map = new AMap.Map(this.$refs.container, {
    resizeEnable: true
   }) //   Map  
   const options = {
    'showButton': true, //         
    'buttonPosition': 'LB', //        
    'buttonOffset': new AMap.Pixel(10, 20), //              
    'showMarker': true, //        
    'showCircle': true, //          
    'circleOptions': {//         
     'strokeColor': '#0093FF',
     'noSelect': true,
     'strokeOpacity': 0.5,
     'strokeWeight': 1,
     'fillColor': '#02B0FF',
     'fillOpacity': 0.25
    },
    zoomToAccuracy: true //                    
   }
   AMap.plugin(['AMap.Geolocation'], function() {
    const geolocation = new AMap.Geolocation(options)
    map.addControl(geolocation)
    geolocation.getCurrentPosition()
   })
   //          mark。  ：         this，             this      this
   const _this = this
   AMap.event.addListener(map, 'click', function(e) {
    map.clearMap() //              
    new AMap.Marker({
     position: e.lnglat,
     map: map
    })
    _this.handleMap(e.lnglat.getLng(), e.lnglat.getLat())
   })

3.キーワード検索機能
）コードの一部（ref、id、クラスの名前は公式サイトと一致しています。そうでないと、ご希望の効果が出ないかもしれません。

<template>
 <div class="map-chart">
  <div id="container" ref="container" />
  <div id="myPageTop">
   <table>
    <tr>
     <td>
      <label>      ：</label>
     </td>
    </tr>
    <tr>
     <td>
      <input id="tipinput">
     </td>
    </tr>
   </table>
  </div>
 </div>
</template>

スクリプトコード:

export default {
 name: 'Map',
 props: [],
 data() {
  return {
   placeSearch: null
  }
 },
 mounted() {
  this.mapInit()
 },
 methods: {
  mapInit() {
   const map = new AMap.Map(this.$refs.container, {
    resizeEnable: true
   }) //   Map  
   const options = {
    'showButton': true, //         
    'buttonPosition': 'LB', //        
    'buttonOffset': new AMap.Pixel(10, 20), //              
    'showMarker': true, //        
    'showCircle': true, //          
    'circleOptions': {//         
     'strokeColor': '#0093FF',
     'noSelect': true,
     'strokeOpacity': 0.5,
     'strokeWeight': 1,
     'fillColor': '#02B0FF',
     'fillOpacity': 0.25
    },
    zoomToAccuracy: true //                    
   }
   //  ：         this，             this      this
   const _this = this
   //     
   const autoOptions = {
    input: 'tipinput'
   }
   const auto = new AMap.Autocomplete(autoOptions)
   this.placeSearch = new AMap.PlaceSearch({
    map: map
   }) //        
   AMap.event.addListener(auto, 'select', this.select)//     ，           
   //      mark   
   AMap.event.addListener(this.placeSearch, 'markerClick', function(e) {
    _this.$emit('bMapDate', e.data.location.lng, e.data.location.lat)
   })
  },
  select(e) {
   this.placeSearch.setCity(e.poi.adcode)
   this.placeSearch.search(e.poi.name) //        
  },
  handleMap(o, a) {
   this.$emit('bMapDate', o, a)
  }
 }
}
</script>

全体完了コード：

<template>
 <div class="map-chart">
  <div id="container" ref="container" />
  <div id="myPageTop">
   <table>
    <tr>
     <td>
      <label>      ：</label>
     </td>
    </tr>
    <tr>
     <td>
      <input id="tipinput">
     </td>
    </tr>
   </table>
  </div>
 </div>
</template>

<script>
export default {
 name: 'Map',
 props: [],
 data() {
  return {
   placeSearch: null
  }
 },
 mounted() {
  this.mapInit()
 },
 methods: {
  mapInit() {
   const map = new AMap.Map(this.$refs.container, {
    resizeEnable: true
   }) //   Map  
   const options = {
    'showButton': true, //         
    'buttonPosition': 'LB', //        
    'buttonOffset': new AMap.Pixel(10, 20), //              
    'showMarker': true, //        
    'showCircle': true, //          
    'circleOptions': {//         
     'strokeColor': '#0093FF',
     'noSelect': true,
     'strokeOpacity': 0.5,
     'strokeWeight': 1,
     'fillColor': '#02B0FF',
     'fillOpacity': 0.25
    },
    zoomToAccuracy: true //                    
   }
   AMap.plugin(['AMap.Geolocation'], function() {
    const geolocation = new AMap.Geolocation(options)
    map.addControl(geolocation)
    geolocation.getCurrentPosition()
   })
   const _this = this
   AMap.event.addListener(map, 'click', function(e) {
    map.clearMap() //              
    new AMap.Marker({
     position: e.lnglat,
     map: map
    })
    _this.handleMap(e.lnglat.getLng(), e.lnglat.getLat())
   })

   //     
   const autoOptions = {
    input: 'tipinput'
   }
   const auto = new AMap.Autocomplete(autoOptions)
   this.placeSearch = new AMap.PlaceSearch({
    map: map
   }) //        
   AMap.event.addListener(auto, 'select', this.select)//     ，           
   AMap.event.addListener(this.placeSearch, 'markerClick', function(e) {
    _this.$emit('bMapDate', e.data.location.lng, e.data.location.lat)
   })
  },
  select(e) {
   this.placeSearch.setCity(e.poi.adcode)
   this.placeSearch.search(e.poi.name) //        
  },
  handleMap(o, a) {
   this.$emit('bMapDate', o, a)
  }
 }
}
</script>

<style scoped>
  .map-chart{
    position: relative;
    margin-bottom:15px;
    width: 100%;
    height: 400px;
    border: 1px #dddddd solid;
  }
  /deep/ .amap-logo,/deep/ .amap-copyright {
    display: none!important;
  }

  #container {
    margin-bottom:15px;
    width: 100%;
    height: 400px;
    border: 1px #dddddd solid;
    z-index: 99999999;
  }

  .button-group {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 12px;
    padding: 10px;
  }

  .button-group .button {
    height: 28px;
    line-height: 28px;
    background-color: #0D9BF2;
    color: #FFF;
    border: 0;
    outline: none;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 3px;
    margin-bottom: 4px;
    cursor: pointer;
  }
  .button-group .inputtext {
    height: 26px;
    line-height: 26px;
    border: 1px;
    outline: none;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 3px;
    margin-bottom: 4px;
    cursor: pointer;
  }
  #tip {
    background-color: #fff;
    padding-left: 10px;
    padding-right: 10px;
    position: absolute;
    font-size: 12px;
    right: 10px;
    top: 20px;
    border-radius: 3px;
    border: 1px solid #ccc;
    line-height: 30px;
  }
  .amap-info-content {
    font-size: 12px;
  }
  #myPageTop {
    position: absolute;
    top: 5px;
    right: 10px;
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ccc;
    margin: 10px auto;
    padding:6px;
    font-family: "Microsoft Yahei", "    ", "Pinghei";
    font-size: 14px;
    z-index: 99999999;
  }
  #myPageTop label {
    margin: 0 20px 0 0;
    color: #666666;
    font-weight: normal;
  }
  #myPageTop input {
    width: 170px;
  }
  #myPageTop .column2{
    padding-left: 25px;
  }
</style>

プロジェクトでdialogを使ったので、検索した結果はマスクの後に表示されます。scopeと加/deep/>>を除いても無駄です。最後にindex.コードは以下の通りです

<style type="text/css">
  .amap-sug-result {
   z-index: 2999!important;
  }
 </style>

効果:

以上は無数の穴を踏んで総括した経験です。
ここで、vueプロジェクトについては高徳地図の位置付けとキーワード検索機能の実例コード（ステップ経験）を使った記事を紹介します。これに関連して、より多くのvue高徳地図の位置付け検索内容を紹介します。私達の以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。