vue如何使用原生高德地圖你知道嗎
更新時(shí)間：2022年02月27日 17:33:52 作者：大得369
這篇文章主要為大家詳細(xì)介紹了vue如何使用原生高德地圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
1、先在vue項(xiàng)目根目錄下新建vue.config.js，這個(gè)文件是沒(méi)有的，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',//開(kāi)啟3D視圖,默認(rèn)為關(guān)閉
buildingAnimation:true,//樓塊出現(xiàn)是否帶動(dòng)畫(huà)
// expandZoomRange:true,
zooms:[3,20],
center:that.markers[0].position
})
AMap.plugin(['AMap.ControlBar',], function(){
// 添加 3D 羅盤(pán)控制
map.addControl(new AMap.ControlBar());
});
this.addMarker(this.markers)
},
//拖動(dòng)事件
mapDraw(arriveCoor){
map = new AMap.Map('container', { //map-location是嵌地圖div的id
resizeEnable: true, //是否監(jiān)控地圖容器尺寸變化
zoom:20, //初始化地圖層級(jí)
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)星圖動(dòng)漫切換鏡頭，動(dòng)畫(huà)效果
<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',//開(kāi)啟3D視圖,默認(rèn)為關(guān)閉
buildingAnimation:true,//樓塊出現(xiàn)是否帶動(dòng)畫(huà)
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)用鏡頭動(dòng)畫(huà)
});
},
//點(diǎn)擊調(diào)用精通動(dòng)漫
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,
},
//快速移動(dòng),前進(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>
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要為大家介紹了vue父子組件相互通信方式示例梳理總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
vue數(shù)據(jù)對(duì)象length屬性未定義問(wèn)題
這篇文章主要介紹了vue數(shù)據(jù)對(duì)象length屬性未定義問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue+webpack實(shí)現(xiàn)異步加載三種用法示例詳解
這篇文章主要介紹了vue+webpack實(shí)現(xiàn)異步加載的三種用法，文中給大家提到了vue+webpack實(shí)現(xiàn)異步組件加載的代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-04-04
編寫(xiě) Vue v-for 循環(huán)的 7 種方式
這篇文章主要分享可編寫(xiě) Vue v-for 循環(huán)的 7 種方式，在Vue中，基本上每個(gè)項(xiàng)目都會(huì)用到v-for循環(huán)。它們?cè)试S你在模板代碼中編寫(xiě)for循環(huán)，接下來(lái)一起看看下面文章的詳細(xì)介紹吧2021-12-12
在VUE項(xiàng)目中經(jīng)常會(huì)用到mapState和mapActions，mapState主要用于同步全局的變量或者對(duì)象，這篇文章主要介紹了VUE中的mapState和mapActions的使用,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了Vue3 全局使用按鈕截流指令示例代碼,Vue2與Vue3中的自定義指令實(shí)現(xiàn)方式略有不同，但實(shí)現(xiàn)的按鈕截流功能是類似的，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
本篇文章主要介紹了Vue-Router模式和鉤子的用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要為大家詳細(xì)介紹了Vue源碼之Watcher的基礎(chǔ)知識(shí)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
vue實(shí)現(xiàn)表單單獨(dú)移除一個(gè)字段驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表單單獨(dú)移除一個(gè)字段驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要給大家介紹的是vue2 vue3中使用Echarts的相關(guān)資料，下面文章 會(huì)詳細(xì)介紹該內(nèi)容，感興趣的小伙伴不要錯(cuò)過(guò)喲2021-09-09