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

最新推荐文章于 2025-04-02 16:59:40 发布

他说不会。

最新推荐文章于 2025-04-02 16:59:40 发布

阅读量2.8k

点赞数 4

分类专栏： css js vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45852743/article/details/123177013

版权

vue 同时被 3 个专栏收录

12 篇文章

订阅专栏

4 篇文章

订阅专栏

css

2 篇文章

订阅专栏

这篇博客展示了如何利用高德地图API（AMap）实现在地图上创建并编辑经纬度圆形和矩形的功能。通过HTML和JavaScript，作者创建了一个地图组件，用户可以输入关键字进行搜索定位，同时支持编辑已有的圆形，包括改变半径和移动中心点。此外，博客还涵盖了点击地图自动获取经纬度坐标以及使用Autocomplete和PlaceSearch进行地址搜索的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

地图实现经纬度圆形和矩形编辑，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();
          }
        });
      }
    },