vue使用高德api实现地图圆形矩形编辑半径搜索

地图实现经纬度圆形和矩形编辑，opi搜索定位指定位置

先看效果

上代码（先配置静态html）

html部分

		<div
            id="container"
            style="width: 606px; height: 406px"
          ></div>
          <div id="myPageTop" v-show="ruleForm.shape == 0">
            <table>
              <tr>
                <td>
                  <label>请输入关键字：</label>
                </td>
              </tr>
              <tr>
                <td>
                  <input id="tipinput" />
                </td>
              </tr>
            </table>
          </div>

mounted部分

mounted: function () {
    this.init(); //地图
  },

methods部分

init: function () {
      var that = this;//全局this指向
      //地图加载
      var map = new AMap.Map("container", {
        center: this.radiCencer,
        resizeEnable: true,
        zoom: 17,
      });
      // this.$refs.panel.style = "display:none;"
      var circle = new AMap.Circle({ 
        center: this.radiCencer,
        radius: this.ruleForm.radius, //半径
        borderWeight: 3,
        strokeColor: "red",
        strokeOpacity: 1,
        strokeWeight: 3,
        strokeOpacity: 0.5,
        fillOpacity: 0.2,
        strokeStyle: "solid",
        strokeDasharray: [10, 10],
        // 线样式还支持 'dashed'
        fillColor: "red",
        zIndex: 50,
      });
      circle.setMap(map);
      // 缩放地图到合适的视野级别
      map.setFitView([circle]);
      var circleEditor = new AMap.CircleEditor(map, circle);
      circleEditor.on("adjust", (e) => {
        this.$set(this.ruleForm, "radius", e.radius);
        // this.ruleForm.radius=event.radius
      });
      circleEditor.on("move", (e) => {
        console.log(e);
        this.ruleForm.longitude = e.lnglat.lng;
        this.ruleForm.latitude = e.lnglat.lat;
        this.radiCencer = [e.lnglat.lng, e.lnglat.lat];
      });
      circleEditor.open();
      AMap.event.addListener(map, "click", (e) => {
        console.log(e, "click");
        this.ruleForm.longitude = e.lnglat.lng;
        this.ruleForm.latitude = e.lnglat.lat;
        this.radiCencer = [e.lnglat.lng, e.lnglat.lat];
        this.init();
      });
      var autoOptions = {
        input: "tipinput",
      };
      var auto = new AMap.Autocomplete(autoOptions);
      var placeSearch = new AMap.PlaceSearch({
        city: "010", // 兴趣点城市
        map: map,
      }); //构造地点查询类
      AMap.event.addListener(auto, "select", select); //注册监听，当选中某条记录时会触发
      function select(e) {
        if (e.poi.location) {
          that.radiCencer = [e.poi.location.lng, e.poi.location.lat];
          that.init();
        }
        that.geoCoordMap.forEach((item, index) => {
          if (e.poi.name == item.name) {
            let arr = item.value.split(",");
            that.radiCencer = [arr[0] * 1, arr[1] * 1];
            that.init();
          }
        });
        that.geoCoordMap1.forEach((item, index) => {
          if (e.poi.name == item.name) {
            let arr = item.value.split(",");
            that.radiCencer = [arr[0] * 1, arr[1] * 1];
            that.init();
          }
        });
      }
    },