vue高德地图自动补齐和覆盖物经纬度map

码林鼠

已于 2022-03-07 20:16:09 修改

阅读量953

点赞数 1

分类专栏： vue 文章标签：自动化 python javascript

于 2020-09-01 23:57:42 首次发布

本文链接：https://blog.csdn.net/weixin_41254345/article/details/108353339

版权

vue 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

<template>
  <div>
    <el-input id="tipinput" type="text" v-model="address"></el-input>
    <div id="container"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      address: "",
      info: [],
      points: "",
    };
  },
  methods: {},
  mounted() {
    var auto = new AMap.Autocomplete({
      input: "tipinput",
    });
    AMap.event.addListener(auto, "select", (e) => {
      this.info[0] = e.poi.location.lng;
      this.info[1] = e.poi.location.lat;
      console.log(this.info);

      var map = new AMap.Map("container", {
        center: this.info,
        zoom: 14,
      });
      var marker = new AMap.Marker({
        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        position: this.info,
      });
      map.add(marker);
      var path = [
        [this.info[0] - 0.0005, this.info[1] + 0.0003],
        [this.info[0] - 0.0005, this.info[1] - 0.0003],
        [this.info[0] + 0.0005, this.info[1] - 0.0003],
        [this.info[0] + 0.0005, this.info[1] + 0.0003],
      ];
      var polygon = new AMap.Polygon({
        path: path,
        strokeColor: "#FF33FF",
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        fillColor: "#1791fc",
        zIndex: 50,
      });
      map.add(polygon);
      // 缩放地图到合适的视野级别
      map.setFitView([polygon, marker]);
      var polyEditor = new AMap.PolyEditor(map, polygon);
      polyEditor.on("adjust", function (event) {
        this.points = event.target.w.path;
        this.points = this.points.map((item) => {
          return [item.lng, item.lat];
        });
        console.log(JSON.stringify(this.points));
      });
      polyEditor.open();
    });
  },
};
</script>
<style lang="scss" scoped>
#container {
  height: 500px;
  width: 500px;
}
</style>

在index.html中引入

注意下面&plugin=AMap.Autocomplete&plugin=AMap.PolyEditor不要拆成两个键值对后用两个script标签引入，这样会报错
(keyvalue就是key)

<script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=keyvalue&plugin=AMap.Autocomplete&plugin=AMap.PolyEditor"></script>
  <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>

效果图：
在这里插入图片描述
上图中的巨型可以拖动，然后获取经纬度数据，这些数据作为下次编辑时的初始化数据