vue-cli3.0引入高德3d动画效果方法一：_vue可视化大屏三维地图打点

作者：花生_TL007 | 2024-06-02 03:28:34

踩

vue可视化大屏三维地图打点

前言：

因为两个方法代码量都特别大，这里分2个页面详细说一下，这个页面是方法一，包括vue-cli3.0中使用和html中使用两种示例

***注意：这里有想看另一种方法的童鞋请点入口：

https://blog.csdn.net/qq_41619796/article/details/102968469

好了。我们回到主题，分两部分来说一下项目中直接使用高德地图的，顺带说我在哪个步骤具体遇到的坑

实现效果：

一：在vue-cli3.0中使用：

实现步骤：

1、在public的index.html中添加一句话，引入js文件,这里的坑，记住一定加 http://

不加会报错： amap is not defined

<script src="http://webapi.amap.com/maps?v=1.4.15&key=  你申请的key   &plugin=AMap.ControlBar"></script>

2、vue.config.js中添加一个配置，configureWebpack这里可以增加jquery的，也可以添加我们地图配置的，我这里遇到的坑是，没注意到层级，导致这个配置放在了devServer: { 这里面，粗心的错误


 configureWebpack: {
    externals: {
      'AMap': 'AMap' // 高德地图配置
    }
  },

3、直接贴上我的组件 gd_com_map.vue


<template>
  <div class="box">
    <div id="container" style="width:1500px; height:600px"></div>
  </div>
</template>
 
<script>
import AMap from 'AMap' // 引入高德地图
export default {
  mounted () {
    this.init()
  },
  methods: {
    init () {
      let map = new AMap.Map('container', {
          resizeEnable: true,
          rotateEnable:true,
          pitchEnable:true,
          zoom: 17,
          pitch:80,
          rotation:-15,
          viewMode:'3D',//开启3D视图,默认为关闭
          buildingAnimation:true,//楼块出现是否带动画
          
          expandZoomRange:true,
          zooms:[3,20],
          center:[116.333926,39.997245]
      })
    }
  }
}
</script>

到这里步骤就结束了，在页面上是可以看到的；

二：直接在html中使用：***可以直接试试，把key换了


<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>3D地图</title>
<style>
body,html{ margin:0;padding:0;font:12px/16px Verdana,Helvetica,Arial,sans-serif;width: 100%;height: 100%}
.container{
  height: 100%
}
</style>
<script language="javascript" src="http://webapi.amap.com/maps?v=1.4.15&key= 
你的高德key &plugin=AMap.ControlBar"></script>
</head>
<body >
<div id="container" style="width:100%; height:100%;resize:both;"></div>
<script language="javascript">
var map;
function mapInit(){
  map = new AMap.Map('container', {
    resizeEnable: true,
    rotateEnable:true,
    pitchEnable:true,
    zoom: 17,
    pitch:80,
    rotation:-15,
    viewMode:'3D',//开启3D视图,默认为关闭
    buildingAnimation:true,//楼块出现是否带动画
    
    expandZoomRange:true,
    zooms:[3,20],
    center:[116.333926,39.997245]
  });
  
  map.addControl(new AMap.ControlBar({
    showZoomBar:false,
    showControlButton:true,
    position:{
      right:'10px',
      top:'10px'
    }
  }))
}
mapInit()
</script>
</body>
</html>

vue-cli3.0引入高德3d动画效果方法一：_vue可视化大屏三维地图打点

前言：

因为两个方法代码量都特别大，这里分2个页面详细说一下，这个页面是方法一，包括vue-cli3.0中使用和html中使用两种示例

***注意：这里有想看另一种方法的童鞋请点入口：

https://blog.csdn.net/qq_41619796/article/details/102968469

好了。我们回到主题，分两部分来说一下项目中直接使用高德地图的，顺带说我在哪个步骤具体遇到的坑

实现效果：

一：在vue-cli3.0中使用：

实现步骤：

1、在public的index.html中添加一句话，引入js文件,这里的坑，记住一定加 http://

2、vue.config.js中添加一个配置，configureWebpack这里可以增加jquery的，也可以添加我们地图配置的，我这里遇到的坑是，没注意到层级，导致这个配置放在了devServer: { 这里面，粗心的错误

3、直接贴上我的组件 gd_com_map.vue

二：直接在html中使用：***可以直接试试，把key换了

更多资料：

1、https://lbs.amap.com/api/javascript-api/example/3d/map3d 高德3d官网

2、https://blog.csdn.net/qq_24147051/article/details/84763265 另一个使用vue-amap 更加详细的大神地址