vue中引用高德地图问题

Question

问题描述

项目中需要引用高德地图，原本用高德地图的拖拽方法进行定位的方式已经成功，但是现在的需求改成输入关键字进行搜索对应的地图信息，自己定义了一个方法，在该方法中引用高德地图的方法报如下错误：

求教原因！

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<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>