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" 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视图,默认为关闭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的idresizeEnable: true, //是否监控地图容器尺寸变化zoom:20, //初始化地图层级center: arriveCoor //初始化地图中心点});// 定位点this.addMarker(arriveCoor);},// 实例化点标记addMarker(arriveCoor) {var _this = this;arriveCoor.forEach(item=>{marker = new AMap.Marker({icon: item.icon,  //图片ipimageSize: "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>`,// 设置是否可以拖拽draggable: true,cursor: 'move',// 设置拖拽效果// raiseOnDrag: true});marker.setMap(map);})},},}
</script>

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

<template><div class="box"><div style="position: absolute;z-index: 10;cursor:pointer" @click="animates()">点击去鼎旺中心</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视图,默认为关闭buildingAnimation:true,//楼块出现是否带动画expandZoomRange:true,center:[113.2385,22.96605],layers: [// 高德默认标准图层new AMap.TileLayer.Satellite(),// 楼块图层new AMap.Buildings({zooms: [16, 18],zIndex: 10,heightFactor: 2 //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({zIndex: 120,shininess: 10,hasSide: true,cullface: 'back',depth: true,});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.3, 0, 0.1, 1],duration: 8000 / speed,},//快速移动,前进zoom: {value: 17,control: [[0.3, 15], [1, 17]],timing: [0.3, 0, 0.7, 1],duration: 4000 / speed,},}, {// 环绕rotation: {value: 270,control: [[0, 0], [1, 270]],timing: [0, 0, 0, 1],duration: 7000 / speed,},//前进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('结束');});},},}
</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>

vue使用原生高德地图相关推荐

Vue引用原生高德地图标注
Vue引用原生高德地图标注一.引用高德? 首先在vue项目中的pubic下的index.html的head中引用. 二.在你的模板中设置一个div你的地图容器 <template>< ...
vue引入原生高德地图
由于工作上的需要,今天捣鼓了半天高德地图. 如果定制化开发需求不太高的话,可以用vue-amap,这个我就不多说了,详细就看官网 https://elemefe.github.io/vue-amap/ ...
Vue 中使用高德地图api
比较简单的原生方式 <template><div style="margin: 0px;padding: 0px"><div id="pan ...
vue项目使用高德地图
vue项目使用高德地图-部分功能介绍在此做个笔记,引入方式使用了高德2.0 loadsh的加载方式 1.引入高德地图方式-NPM npm i @amap/amap-jsapi-loader --sa ...
vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
在Vue中使用高德地图
在Vue中使用高德地图一.如何在Vue中引入基础高德地图 1.步骤一:注册并登录高德地图开放平台,申请密钥 2.步骤二:安装高德地图加载器 3.封装一个自定义地图组件,并初始化地图二.根据关键词搜 ...
Vue中使用高德地图
Vue中使用高德地图定位及poi搜索,以及其他插件的使用方法 1.第一步安装 npm install vue-amap --save 2.引入vue-amap main.js import Vue f ...
Vue中使用高德地图，简单明了
一.使用步骤 1.在vue中引入高德地图的加载器 npm i @amap/amap-jsapi-loader --save 在自己的组件中去引用 <template>//这个div就是 ...
vue项目使用高德地图定位当前地址
vue项目使用高德地图定位当前地址一.在项目中安装vue-amap插件二.页面代码三.data数据一.在项目中安装vue-amap插件 1.最终效果 2.安装命令 npm install vu ...
Vue中使用高德地图（vue-amap）的采坑记录小白入门
这里写目录标题写在开始 step.1 安装组件 step.2 引入组件 step.3注册高德高德开发者账号,申请KEY step.4 正式使用写在开始俗话说授人以鱼不如授人以渔,直接记录代码的话 ...

vue使用原生高德地图

vue使用原生高德地图相关推荐

最新文章

热门文章