温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue怎么使用原生高德地图

发布时间:2022-02-28 10:07:30 阅读:461 作者:iii 栏目:开发技术
Vue开发者专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

本篇内容主要讲解“vue怎么使用原生高德地图”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue怎么使用原生高德地图”吧!

1、先在vue项目根目录下新建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" ></div>
  </div>
</template>
<script>
import AMap from 'AMap' // 引入高德地图
let map,marker;
export default {
  data() {
    return {
       markers : [
         {
              icon1,
              position: [121.50637731.243105],
              name:'张三',
          }, {
              icon1,
              position: [121.50607731.242105],
              name:'李四',
          }, {
              icon1,
              position: [121.50657731.240105],
              name:'王五',
          }
      ]
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      let that = this;
       map = new AMap.Map('container', {
          resizeEnabletrue,
          rotateEnable:true,
          pitchEnable:true,
          zoom17,
          pitch:50,
          rotation:-15,
          viewMode:'3D',//开启3D视图,默认为关闭
          buildingAnimation:true,//楼块出现是否带动画
          // 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
              resizeEnabletrue//是否监控地图容器尺寸变化
              zoom:20//初始化地图层级
              center: arriveCoor //初始化地图中心点
         });
         // 定位点
          this.addMarker(arriveCoor);
    },
    // 实例化点标记
    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 >${item.name}</span><img src=${mapicon} onclick="clickImgMarker(${item.name})"></div>`,
              // 设置是否可以拖拽
              draggabletrue,
              cursor'move',
              // 设置拖拽效果
              // raiseOnDrag: true
          });
          marker.setMap(map);
      })
    },
  },
}
</script>

vue怎么使用原生高德地图

5、卫星图动漫切换镜头,动画效果

<template>
  <div class="box">
	  <div  @click="animates()">点击去鼎旺中心</div>
    <div id="container" ></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', {
          resizeEnabletrue,
          rotateEnable:true,
          pitchEnable:true,
          zoom13,
		  pitch65,
		  rotation45,
          viewMode:'3D',//开启3D视图,默认为关闭
          buildingAnimation:true,//楼块出现是否带动画
          expandZoomRange:true,
          center:[113.2385,22.96605],
		  layers: [
			// 高德默认标准图层
			new AMap.TileLayer.Satellite(),
			// 楼块图层
			new AMap.Buildings({
				zooms: [1618],
				zIndex10,
				heightFactor2 //2倍于默认高度,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({
	        zIndex120,
	        shininess10,
	        hasSidetrue,
	        cullface'back',
	        depthtrue,
	    });
	    pl.setLoca(loca);
	    map.on('complete'function () {
	        loca.animate.start();
	        // setTimeout(_this.animates, 2000);//调用镜头动画
	    });
    }, 
	//点击调用精通动漫
	animates(){
		var speed = 1;
		loca.viewControl.addAnimates([
		   // 寻迹
		   {
			  center: {
			  value: [113.2385,22.96605],
			  control: [[113.2385,22.96605], [113.2385,22.96605]],
			  timing: [0.300.11],
			  duration8000 / speed,
			},
			//快速移动,前进
			zoom: {
			  value17,
			  control: [[0.315], [117]],
			  timing: [0.300.71],
			  duration4000 / speed,
			},
		  }, {
			// 环绕
			rotation: {
			  value270,
			  control: [[00], [1270]],
			  timing: [0001],
			  duration7000 / speed,
			},
			//前进
			zoom: {
			  value17,
			  control: [[0.316], [117]],
			  timing: [0.300.71],
			  duration5000 / speed,
			},
		  }], function () {
			pl.hide(1000);
			setTimeout(animate, 2000);
			console.log('结束');
		});
	},
  },
}
</script>
<style>
	.amap-e.amap-maps {
	    width100%;
	    height100%;
	    outline: none;
	    background#050b17;
	}
	.amap-copyright {
	    display: none!important;
	    left77px;
	    height16px;
	    bottom0;
	    padding-bottom2px;
	    font-size11px;
	    font-family: Arial,sans-serif;
	}
	.amap-copyright.amap-logo {
	    display: none!important;
	}
</style>

vue怎么使用原生高德地图

到此,相信大家对“vue怎么使用原生高德地图”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI

开发者交流群×