高德地图通过搜索框选择地点，并可手动选择地点

<el-form-item label="地点" prop="weizhi" class="work-item-label">
     <div class="form-tips">
         请在地图中确认位置
     </div>
     <template>
         <div class="map-wrap">
              <div id="GDMap" style="width: 800px;height: 400px;"></div>
              <input
                  id="tipinput"
                  v-model="position"
                  type="text"
                  placeholder="请选择地址"
              />
          </div>
      </template>
</el-form-item>

 data() {
    return {
      position: [],
      latitude: null,
      longitude: null,
      mark: null,
      ruleForm: {
        weizhi: [], //位置
      },
      rules: {
        weizhi: [
          { required: true, message: '请选择地点', trigger: 'change' }
        ],
      },
      alarmMarker: null,
      alarmIcon: require('@/assets/screen/alarm_icon.png'),
    };
  }, 
 watch: {
    position: {
      handler(newName) {
        if (newName == [] || newName == '') {
          this.ruleForm.weizhi = [];
        }
      }
    }
  },
  mounted() {
      this.map([117.407612, 40.047473]);
  },

//地图加载
    map(center) {
      let _this = this;
      var map = new AMap.Map('GDMap', {
        zoom: 11,
        resizeEnable: true,
        center: center
      });
      //选中的icon
      let icon = new AMap.Icon({
        image: _this.alarmIcon,
        imageSize: new AMap.Size(50, 50)
      });
      //输入提示
      var autoOptions = {
        input: 'tipinput'
      };
      //关键字搜索点位
      AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function() {
        var auto = new AMap.AutoComplete(autoOptions);
        auto.on('select', select);
        //下拉选择
        function select(e) {
          if (_this.$route.query.id) {
            _this.mark.setMap(null);
          }
          placeSearch.setCity(e.poi.adcode);
          placeSearch.search(e.poi.name);
          //给默认位置打标记点
          if (_this.alarmMarker) {
            _this.alarmMarker.setMap(null);
            _this.alarmMarker = null;
          }
          _this.alarmMarker = new AMap.Marker({
            position: new AMap.LngLat(e.poi.location.lng, e.poi.location.lat),
            offset: new AMap.Pixel(-25, -25),
            icon: icon
          });
          map.add(_this.alarmMarker);
          _this.longitude = e.poi.location.lng;
          _this.latitude = e.poi.location.lat;
          _this.ruleForm.weizhi = [e.poi.location.lng, e.poi.location.lat];
        }
        //点击搜索出的具体点
        var placeSearch = new AMap.PlaceSearch({
          map: map
        });
        placeSearch.on('markerClick', function(e) {
          let location = e.data.location;
          if (_this.alarmMarker) {
            _this.alarmMarker.setMap(null);
            _this.alarmMarker = null;
          }
          _this.alarmMarker = new AMap.Marker({
            position: new AMap.LngLat(location.lng, location.lat),
            offset: new AMap.Pixel(-25, -25),
            icon: icon
          });
          map.add(_this.alarmMarker);
          _this.longitude = location.lng;
          _this.latitude = location.lat;
          _this.ruleForm.weizhi = [location.lng, location.lat];
        });
      });

      //点击地图 打点
      map.on('click', function(e) {
        if (_this.alarmMarker) {
          _this.alarmMarker.setMap(null);
          _this.alarmMarker = null;
        }
        _this.alarmMarker = new AMap.Marker({
          position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat),
          offset: new AMap.Pixel(-25, -25),
          icon: icon
        });
        map.add(_this.alarmMarker);
        _this.longitude = e.lnglat.lng;
        _this.latitude = e.lnglat.lat;
        _this.ruleForm.weizhi = [e.lnglat.lng, e.lnglat.lat];
      });
      //编辑情况 打点（蓝色）
      if (_this.$route.query.id) {
        let icon = new AMap.Icon({
          image:
            '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
          imageSize: new AMap.Size(24, 34)
        });
        _this.mark = new AMap.Marker({
          position: _this.ruleForm.weizhi,
          offset: new AMap.Pixel(-13, -30),
          icon: icon //图片ip
        });
        map.add(_this.mark);
      }
    },

 

 

 需要将高德地图引入到项目中，这里不赘述了