高德地图自动缩放居中，一屏展示。

最新推荐文章于 2024-07-08 19:01:49 发布

Lightning King

最新推荐文章于 2024-07-08 19:01:49 发布

阅读量301

点赞数 1

文章标签： js vue.js

本文链接：https://blog.csdn.net/yuyihuan/article/details/133814929

版权

根据坐标,一屏展示，自动缩放居中

<script
    type="text/javascript"
    src="http://webapi.amap.com/maps?v=1.4.6&key=自己的key&plugin=AMap.Autocomplete,AMap.PlaceSearch"
  ></script>
  <script src="https://webapi.amap.com/ui/1.0/main.js"></script>

<!-- 高德地图 -->
<template>
  <div id="mapContainer" style="width: 100%; height: 400px;"></div>
</template>

<script>
export default {
  props:{
  //传入的坐标json格式
    coordinate:{
      type:String,
      default:''
    }
  },
  mounted() {
    // 给定的坐标点
    const temp = JSON.parse(this.coordinate)
    // 将坐标转换为高德地图格式
    const amapCoordinates = temp.map(coord => new window.AMap.LngLat(coord[0], coord[1]));

    // 在 mounted 钩子中初始化地图
    const map = new window.AMap.Map('mapContainer', {
      center: this.calculateCenter(amapCoordinates), // 设置地图中心点
      zoom: 12, // 初始缩放级别
    });

    // 创建折线实例
    const polyline = new window.AMap.Polyline({
      path: amapCoordinates, // 设置折线的坐标数组
      strokeColor: '#3673F5', // 线颜色
      strokeOpacity: 1, // 线透明度
      strokeWeight: 3, // 线宽
      strokeStyle: 'solid', // 线样式
    });

    // 将折线添加到地图
    polyline.setMap(map);

    // 自适应缩放等级
    map.setFitView();
  },
  methods: {
    // 计算坐标的中心点
    calculateCenter(coords) {
      let totalLat = 0;
      let totalLng = 0;

      coords.forEach(coord => {
        totalLat += coord.getLat();
        totalLng += coord.getLng();
      });

      const avgLat = totalLat / coords.length;
      const avgLng = totalLng / coords.length;

      return new window.AMap.LngLat(avgLng, avgLat);
    },
  },
};
</script>

<style lang='less'>
#mapContainer {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
</style>