vue cli使用高德地图绘制带洞多边形

最新推荐文章于 2024-04-09 10:52:58 发布

欧阳小坏

最新推荐文章于 2024-04-09 10:52:58 发布

阅读量577

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/ou24689/article/details/119885008

版权

该博客介绍了如何在Vue.js应用中集成VueAMap插件来使用高德地图API。首先在main.js中导入VueAMap并配置高德的key和所需插件。然后在index.html中引入地图的CDN。在组件中，通过AMap.Polygon绘制多边形，并在`drawBounds`方法中加载行政区划数据。示例展示了如何绘制临沂市的边界。

摘要由CSDN通过智能技术生成

在这里插入图片描述

1.在main.js中引入

import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  // 高德的key
  key: '你的KEY',
  // 插件集合
  plugin: ['AMap.Geolocation','Geolocation','AMap.Polygon','AMap.DistrictSearch','AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 高德 sdk 版本，默认为 1.4.4
  v: '1.4.4'
});

2.需要使用高德地图原生api我是在index.html中又添加了一遍cdn，这里应该可以改进。

  <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=你的KEY&plugin=Map3D,ElasticMarker,AMap.Geocoder,AMap.Geolocation,AMap.Driving,AMap.DistrictSearch"></script>

3.index.vue

 <el-amap
      vid="amapDemo"
      class="map-box"
      :zoom="8"
      :events="mapEvent"
      :center="mapCenter"
      :amapManager="amapManager"
    >
      <el-amap-polygon
        strokeColor="#4ea8f8"
        strokeOpacity="0.1"
        fillColor="#0091ea"
        fillOpacity="0.6"
        v-for="(polygon, index) in polygons"
        :key="index"
        strokeWeight="1"
        :path="polygon.Ce.path"
      ></el-amap-polygon>
</el-amap>


<script>
import linyi from "@/util/linyi"; //这里的数据是临沂市边界 也可以使用高德地图的方法获取
export default {
  data() {
    let self = this;
    return {
      linyi,
      polygons: [],
      mapCenter: [118.3123, 35.23668],
      mapZoom: 8,
    };
  },
  mounted: function () {
    setTimeout(() => {
      this.drawBounds();
    }, 200);
  },
  created() {
  },
  methods: {
    drawBounds() {
      var that = this;
      var bounds = this.linyi; 
      //加载行政区划插件
     
      that.polygons = [];
      var outer = [
       new AMap.LngLat(-360, 90, true),
       new AMap.LngLat(-360, -90, true),
       new AMap.LngLat(360, -90, true),
       new AMap.LngLat(360, 90, true),
      ];

        var polygon = new AMap.Polygon({
          path: [outer, bounds],
        });
        that.polygons.push(polygon);
      console.log(that.polygons);
      AMap.Polygon.bind(that.polygons);
    },
  },
};
</script>