提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

在vue里面使用高德地图的详细步骤：怎么设置中心点center？还有坐标点的position值？（文末有代码）

Vue代码 设置 怎么 详细 步骤 地图 里面
2023-09-14 09:04:08 时间

百度了一大堆。乱七八糟的。

其实不需要安装什么。

下面就是步骤：

高德地图API

这里可以获取想要位置的经纬度

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=638bc48934e46413faf2432fdd11a6ce">
</script>
</body>
</html>

vue.config.js

module.exports = {
    // 热更新配置
    // chainWebpack: config => {
    //     // 修复HMR
    //     config.resolve.symlinks(true);
    // },
    configureWebpack: {
        externals: {
            "AMap": "AMap"
        }
    }
};

地图页面：

<template>
  <div class="about">
    <div class="big-img">
      <img :src="imgUrl.src" alt="关于我们"/>
    </div>
    <div class="main-box">
      <h1>关于我们</h1>

      <!--公司简介-->
      <div class="company-profile">
        <h2>公司简介</h2>
        <p>
         aaaaaaaaaaa
        </p>
      </div>

      <!--        荣誉资质-->
      <div class="honor-and-qualification">
        <h2>荣誉资质</h2>
        <h2>honor-and-qualification</h2>
        <ul>
          <li v-for="(item, index) in honorAndQualificationList" :key="index">
            <img :src="item.url" :alt="item.text">
            <h2>{{ item.text }}</h2>
          </li>
        </ul>

      </div>
      <div class="clearfix"></div>

      <!--      联系我们-->
      <div class="contact-us">
        <h2>联系我们</h2>
        <p>欢迎来到a公司，如果您有需要意向，

          请您留言或者是通过以下方式联系我们！</p>
        <p>电话：028-85756992 028-85756996</p>
        <p>邮箱：
          <a href="mailto:1123456789@qq.com">
            1123456789@qq.com
          </a>
        </p>
        <p>地址：中国·四川省泸州市高新工业开发区</p>
        <!--二维码-->
        <div class="QR-code">
          <div>
            <img :src="xcxImgSrc" alt="小程序二维码">
            <p>小程序二维码</p>
          </div>
          <div>
            <img :src="wxImgSrc" alt="微信二维码">
            <p>微信二维码</p>
          </div>
        </div>
      </div>
      <!--      地图-->
      <div id="mapContainer"></div>
    </div>
  </div>
</template>

<script>
import AMap from "AMap";

export default {
  name: "About",
  data() {
    return {
      honorAndQualificationList: [
        {
          url: require('../../assets/images/zizhi1.jpg'),
          text: '荣誉1'
        },
        {
          url: require('../../assets/images/zizhi2.jpg'),
          text: '荣誉2'
        },
        {
          url: require('../../assets/images/zizhi3.jpg'),
          text: '荣誉3'
        },
        {
          url: require('../../assets/images/zizhi4.jpg'),
          text: '荣誉4'
        },
        {
          url: require('../../assets/images/zizhi5.jpg'),
          text: '荣誉5'
        },
        {
          url: require('../../assets/images/zizhi6.jpg'),
          text: '荣誉6'
        },
      ],
      imgUrl: {
        src: require('../../assets/images/gywm.jpg'),
      },
      xcxImgSrc: require('../../assets/images/ewmxcx.jpg'),
      wxImgSrc: require('../../assets/images/ewmwx.jpg'),
    }
  },
  mounted() {
    this.showMap()
  },
  methods: {
    showMap() {
      let map = new AMap.Map("mapContainer", {
        resizeEnable: true,
        center: [104.037969,30.521942],
        zoom: 13,
      })
      // 坐标点
      let marker = new AMap.Marker({
        position: new AMap.LngLat(104.037969,30.521942),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: '北京'
      });

      // 将创建的点标记添加到已有的地图实例：
      map.add(marker);
      // 同时引入工具条插件，比例尺插件和鹰眼插件
      AMap.plugin([
        'AMap.ToolBar',
        'AMap.Scale',
        'AMap.OverView',
        'AMap.MapType',
        'AMap.Geolocation',
      ], function () {
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        map.addControl(new AMap.ToolBar());

        // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
        map.addControl(new AMap.Scale());

        // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
        map.addControl(new AMap.OverView({isOpen: true}));

        // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
        map.addControl(new AMap.MapType());

        // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
        map.addControl(new AMap.Geolocation());
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.clearfix {
  clear: both;
}

.about {
  background-color: lightskyblue;
  width: 100%;
  height: 100%;
  margin-top: 70px;
  margin-bottom: 100px;

  .big-img {
    //margin-top: 70px;
  }

  .main-box {
    width: 1200px;
    height: 100%;
    margin: 0 auto;

    .company-profile {

    }

    .honor-and-qualification {
      margin-top: 70px;

      ul {
        margin-left: 40px;

        li {
          list-style: none;
          width: 310px;
          border: 1px solid black;
          margin: 10px;
          padding: 20px;
          float: left;

          img {
            width: 350px;

            height: 300px;
          }
        }

        li:hover {
          border: 1px solid blue;
        }
      }
    }

    .contact-us {
      height: 1000px;

      .QR-code {
        div {
          width: 200px;
          height: 200px;
          float: left;
          margin: 50px;
        }
      }
    }

    #mapContainer {
      width: 1000px;
      height: 500px;
      background-color: #ffffff;
      margin: 50px;
    }

  }


}
</style>

相关文章