前言：

        因为两个方法代码量都特别大，这里分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>

更多资料：

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

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

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue