problem description

Amap needs to be quoted in the project. The original method of positioning using Amap"s drag-and-drop method has been successful, but now the requirement has been changed to enter keywords to search the corresponding map information, and we have defined a method by ourselves. The following error is reported by quoting Amap"s method in this method:

ask for advice!

the environmental background of the problems and what methods you have tried

related codes

/ / Please paste the code text below (do not replace the code with pictures)
< template lang= "html" >
< div class= "map-div" >

 <el-row :gutter="20" >
   <el-col :span="4" style="text-align:right;line-height:40px;">
     :
   </el-col>
   <el-col :span="20">
     <el-input v-model="address" size="small"></el-input>
   </el-col>
 </el-row>
 <el-row :gutter="20" style="margin:10px 0">
   <el-col :span="4" style="text-align:right;line-height:40px;">
     :
   </el-col>
   <el-col :span="8">
     <el-input v-model="longitude" size="small"></el-input>
   </el-col>
   <el-col :span="4" style="text-align:right;line-height:40px;">
     :
   </el-col>
   <el-col :span="8">
     <el-input v-model="latitude" size="small"></el-input>
   </el-col>
 </el-row>
 <el-row :gutter="20" >
   <el-button type="primary" class="fr"  v-on:click="submit"></el-button>
 </el-row>
 <el-row  style="position:relative">
   <div  id="container" style="width:100%;height:400px;position:relative"> </div>
   <el-input ref="tipinput" placeholder="" v-model="searchAddr" class="input-with-select searchAddr">
     <el-button slot="append" icon="el-icon-search" @click="positionAddr"></el-button>
   </el-input>
 </el-row>

< / div >
< / template >
< script >
import AMap from "AMap"
/ / import AMapUI from" AMapUI"
export default {
data () {

return {
  // myWidth: (window.screen.width) + "px",
  // myHeight: (window.screen.height) + "px"
  address: "",
  longitude: "",
  latitude: "",
  searchAddr: ""
}

},
created () {
},
mounted () {

this.loadmap() // 

},
methods: {

loadmap() {
  const self = this
  AMapUI.loadUI(["misc/PositionPicker"], function(PositionPicker) {
    var map = new AMap.Map("container", {
      zoom: 16,
      scrollWheel: true,
      resizeEnable: true
    })
    var positionPicker = new PositionPicker({
      mode: "dragMarker",
      map: map,
      iconStyle: { // 
        url: "//webapi.amap.com/ui/1.0/assets/position-picker2.png",
        ancher: [24, 40],
        size: [48, 48]
      }
    })
    positionPicker.on("success", function(positionResult) {
      // console.log(positionResult)
      self.longitude = positionResult.position.lng
      self.latitude = positionResult.position.lat
      self.address = positionResult.address
    })
    positionPicker.on("fail", function(positionResult) {
      self.longitude = ""
      self.latitude = ""
    })
    positionPicker.start()
  })
},
submit() {
  var params = {
    lng: this.longitude,
    lat: this.latitude,
    address: this.address
  }
  this.$emit("submit", params)
},
positionAddr() {
  let self = this
  var map = new AMap.Map("container", {
    resizeEnable: true
  });
  AMap.service(["AMap.PlaceSearch"], function() {
      var placeSearch = new AMap.PlaceSearch({ //
          pageSize: 5,
          pageIndex: 1,
          city: "010", //
          map: map,
          panel: "panel"
      });
      //
      placeSearch.search(self.searchAddr);
  });
}

}
}
< / script >