vue如何使用原生高德地圖你知道嗎

更新時(shí)間：2022年02月27日 17:33:52 作者：大得369

這篇文章主要為大家詳細(xì)介紹了vue如何使用原生高德地圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

1、先在vue項(xiàng)目根目錄下新建vue.config.js，這個文件是沒有的，vue不提供

module.exports = {
  configureWebpack: {
	  externals: {
		'AMap': 'AMap', // 高德地圖配置
		'AMapUI': 'AMapUI'
	  }
  },
}

2、在vue文件index.html中引入高德地圖js文件

<!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>default</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but default 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="http://webapi.amap.com/maps?v=1.4.3&key=你的高德地圖key&plugin=AMap.ControlBar"></script>
  </body>
</html>

3、在vue文件中使用

<template>
  <div class="box">
    <div id="container" style="width:1500px; height:900px"></div>
  </div>
</template>
<script>
import AMap from 'AMap' // 引入高德地圖
let map,marker;
export default {
  data() {
    return {
       markers : [
         {
              icon: 1,
              position: [121.506377, 31.243105],
              name:'張三',
          }, {
              icon: 1,
              position: [121.506077, 31.242105],
              name:'李四',
          }, {
              icon: 1,
              position: [121.506577, 31.240105],
              name:'王五',
          }
      ]
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      let that = this;
       map = new AMap.Map('container', {
          resizeEnable: true,
          rotateEnable:true,
          pitchEnable:true,
          zoom: 17,
          pitch:50,
          rotation:-15,
          viewMode:'3D',//開啟3D視圖,默認(rèn)為關(guān)閉
          buildingAnimation:true,//樓塊出現(xiàn)是否帶動畫
          // expandZoomRange:true,
          zooms:[3,20],
          center:that.markers[0].position
      })
      AMap.plugin(['AMap.ControlBar',], function(){
              // 添加 3D 羅盤控制
              map.addControl(new AMap.ControlBar());
      });
      this.addMarker(this.markers)
    },
    //拖動事件
    mapDraw(arriveCoor){
         map = new AMap.Map('container', {   //map-location是嵌地圖div的id
              resizeEnable: true, //是否監(jiān)控地圖容器尺寸變化
              zoom:20, //初始化地圖層級
              center: arriveCoor //初始化地圖中心點(diǎn)
         });
         // 定位點(diǎn)
          this.addMarker(arriveCoor);
    },
    // 實(shí)例化點(diǎn)標(biāo)記
    addMarker(arriveCoor) {
       var _this = this;
       arriveCoor.forEach(item=>{
          marker = new AMap.Marker({
              icon: item.icon,  //圖片ip
              imageSize: "20px",
              position: [item.position[0], item.position[1]],
              // offset: new AMap.Pixel(-13, -30),
              content:`<div class="custom-content-marker"><span style="display:block;width:200px">${item.name}</span><img src=${mapicon} onclick="clickImgMarker(${item.name})"></div>`,
              // 設(shè)置是否可以拖拽
              draggable: true,
              cursor: 'move',
              // 設(shè)置拖拽效果
              // raiseOnDrag: true
          });
          marker.setMap(map);
      })
    },
  },
}
</script>

5、衛(wèi)星圖動漫切換鏡頭，動畫效果

<template>
  <div class="box">
	  <div style="position: absolute;z-index: 10;cursor:pointer" @click="animates()">點(diǎn)擊去鼎旺中心</div>
    <div id="container" style="width: 2400px;height: 920px;"></div>
  </div>
</template>
<script>
import AMap from 'AMap' // 引入高德地圖
var map;
export default {
  data() {
    return {
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
       var _this = this;
       map = new AMap.Map('container', {
          resizeEnable: true,
          rotateEnable:true,
          pitchEnable:true,
          zoom: 13,
		  pitch: 65,
		  rotation: 45,
          viewMode:'3D',//開啟3D視圖,默認(rèn)為關(guān)閉
          buildingAnimation:true,//樓塊出現(xiàn)是否帶動畫
          expandZoomRange:true,
          center:[113.2385,22.96605],
		  layers: [
			// 高德默認(rèn)標(biāo)準(zhǔn)圖層
			new AMap.TileLayer.Satellite(),
			// 樓塊圖層
			new AMap.Buildings({
				zooms: [16, 18],
				zIndex: 10,
				heightFactor: 2 //2倍于默認(rèn)高度，3D下有效
			}),
		  ],
      })
	  //定位鼎旺中心
	  var maskerIn = new AMap.Marker({
		position:[113.2385,22.96605],
		map:map
	  });
	  var loca = window.loca = new Loca.Container({
	      map,
	  });
	  var pl = window.pl = new Loca.PolygonLayer({
	        zIndex: 120,
	        shininess: 10,
	        hasSide: true,
	        cullface: 'back',
	        depth: true,
	    });
	    pl.setLoca(loca);
	    map.on('complete', function () {
	        loca.animate.start();
	        // setTimeout(_this.animates, 2000);//調(diào)用鏡頭動畫
	    });
    }, 
	//點(diǎn)擊調(diào)用精通動漫
	animates(){
		var speed = 1;
		loca.viewControl.addAnimates([
		   // 尋跡
		   {
			  center: {
			  value: [113.2385,22.96605],
			  control: [[113.2385,22.96605], [113.2385,22.96605]],
			  timing: [0.3, 0, 0.1, 1],
			  duration: 8000 / speed,
			},
			//快速移動,前進(jìn)
			zoom: {
			  value: 17,
			  control: [[0.3, 15], [1, 17]],
			  timing: [0.3, 0, 0.7, 1],
			  duration: 4000 / speed,
			},
		  }, {
			// 環(huán)繞
			rotation: {
			  value: 270,
			  control: [[0, 0], [1, 270]],
			  timing: [0, 0, 0, 1],
			  duration: 7000 / speed,
			},
			//前進(jìn)
			zoom: {
			  value: 17,
			  control: [[0.3, 16], [1, 17]],
			  timing: [0.3, 0, 0.7, 1],
			  duration: 5000 / speed,
			},
		  }], function () {
			pl.hide(1000);
			setTimeout(animate, 2000);
			console.log('結(jié)束');
		});
	},
  },
}
</script>
<style>
	.amap-e, .amap-maps {
	    width: 100%;
	    height: 100%;
	    outline: none;
	    background: #050b17;
	}
	.amap-copyright {
	    display: none!important;
	    left: 77px;
	    height: 16px;
	    bottom: 0;
	    padding-bottom: 2px;
	    font-size: 11px;
	    font-family: Arial,sans-serif;
	}
	.amap-copyright, .amap-logo {
	    display: none!important;
	}
</style>