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的id
resizeEnable: true, //是否监控地图容器尺寸变化
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 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使用高德地图实现城市定位的具体代码,供大家参考,具体内容如下 一 前端选择框点击跳转至地图选址页面 <van-row class="address_item"> <van-col span="6" class="item-title">收货地址</van-col> <van-col span="18"> <p class="item&qu
-
vue+高德地图实现地图搜索及点击定位操作
首先需要在index.html中引入高德地图的js链接,key需要换成你自己的key 最近有个需求是实现一个使用地图搜索定位的功能,在网上参考了下其他的文章,感觉不是很完善,自己整理了一下,可以实现点击定位,搜索列表定位等功能,可能有些地方是多余的,需要的自己看着改下 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=你的key"></
-
Vue开发高德地图应用的最佳实践
目录 前言 异步加载 封装组件 使用组件 自定义界面最佳实践 总结 前言 之前做不过不少关于地图交互的产品系统,目前国内主流的地图应用 SDK 只有几家:高德.百度和腾讯.所以个人觉得在 PC 应用上高德地图开发相对好一些,至少体验起来没有很明显的坑.这篇文章算是总结下开发地图应用总结吧. 异步加载 因为使用 js sdk 应用,脚本文件本身体积很大,所以要注意下加载的白屏时间,解决用户体验问题,目前绝大部分产品应用都是 SPA 单页面应用系统,所以我封装一个异步加载的方法: const loa
-
在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1) npm install vue-amap --save 2) import VueAMap from 'vue-amap' Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: '********************',//自己在高德地图平台上的key值 plugin: ['AMa
-
Vue 引入AMap高德地图的实现代码
本文代码仅针对 Vue CLI 3.x 生成的项目有效,但是在第二步配置的时候,可以直接配置 webpack.externals,所以本引入思路是通用的,并不局限于该项目 资源 AMap 准备-入门教程 引入 AMap 在 public/index.html 文件 </body> 前引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=您申请的
-
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
-
在vue项目中引入高德地图及其UI组件的方法
引入高德地图: 打开index.html,引用高德地图的JavaScript API: <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你的API key"></script> 在"key="这里添加你申请的key,key不需要加引号. 引入高德地图UI组件,只需要在上面代码后面再加一串代码: <script
-
vue异步加载高德地图的实现
本文介绍了vue异步加载高德地图的实现,分享给大家,具体如下: 几种加载js的方式 同步加载 异步加载 延迟加载 同步加载 用的最多的一种方式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的.但这样如果js中有输出document内容.修改dom.重定向等行为,就会造成页面堵塞.所以一般建议把<script>标签放在<body>结尾处,这样尽可能减少页面阻塞. <script src="htt
-
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
一.在vue-cli的框架下的main.js(或者main.ts)中引入高德插件,代码如下: import Vue from 'vue' import VueAMap from 'vue-amap' import ElementUI from 'element-ui' import App from './App.vue' import router from './router' import store from './store' import './registerServiceWork
-
VUE项目中调用高德地图的全流程讲解
目录 前言 申请高德key 技术选型 刷新页面,地图加载偶尔失败 在绑定插件的时候,控制台报错 a[d].split is not a function 原生调用高德API 总结 前言 相信大家或多或少都接触过在大屏的项目,在大屏项目中除了用到了echarts中的行政地图,街道地图也是很常见的,今天主要来说一下在vue中调用高德地图遇到的一些问题. 申请高德key 无论我们使用任何方式调用高德地图都需要在高德地图开放平台中申请key 注册帐号 访问高德地图开发平台根据实际情况填写就可以(实名认证
-
vue调用高德地图实例代码
一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. 按照官方提供的方法引入 1.修改webpac.base.conf.js文件 externals: { 'AMap': 'AMap' } 2.引入sdk 引入有两种方式,一种是页面直接引入 复制代码 代码如下: <script type="text/javascript" src=&q
-
Vue使用高德地图搭建实时公交应用功能（地图 + 附近站点+线路详情 + 输入提示+换乘详情）
最近项目要使用高德地图写了一个实时公交的应用,这边分享一个小应用主要熟悉下高德地图在vue中的使用,常用api,vue的常用指令 先给大家看下页面效果: 如果有需要源码的童鞋请移步我的github地址 vue搭建实时公交 (欢迎star) 实现思路 在vue项目中导入高德地图 具体功能调用相应高德js APi 1.在vue项目中导入高德地图 1.修改webpac.base.conf.js文件 externals: { 'AMap': 'AMap' } 2.引入sdk 引入有两种方式,一种是在in
-
VUE项目调用高德地图的详细步骤
目录 前言 申请高德key 技术选型 准备工作 项目中应用 刷新页面,地图加载偶尔失败 在绑定插件的时候,控制台报错 a[d].split is not a function 原生调用高德API 混合使用(vue-amap与原生API混合使用) 总结 参考链接 前言 相信大家或多或少都接触过在大屏的项目,在大屏项目中除了用到了echarts中的行政地图,街道地图也是很常见的,今天主要来说一下在vue中调用高德地图遇到的一些问题
-
vue高德地图之玩转周边
前言:在之前的博客中,有成功引入高德地图,这是以前的地址 vue 调用高德地图. 因为一些需求,需要使用到地图的周边功能. 完整的项目代码请查看 我的github 一 .先看要实现的结果,参考了链家的周边,如图所示. 二 .原理分析 1.引入高德api,这个在之前的博客提到过,vue 调用高德地图. 2.使用地图的周边插件,这是 高德网站的api. AMap.PlaceSearch //地点搜索服务插件,提供某一特定地区的位置查询服务 在插件中的各种方法中选取了searchNearBy的