高德地图开放平台:
https://lbs.amap.com/api/javascript-api/guide/abc/prepare
1. 在index.html中引入高德地图,并替换key值
<script src="https://webapi.amap.com/maps?v=1.3&key= &plugin=AMap.Autocomplete">
2.在页面中直接使用
<template>
<div>
<p>jsmap</p>
<div id="mapBox" class="ppp"></div>
</div>
</template>
<script>
export default {
data() {
return {
mapData: {
center: [104.063266, 30.578026],
zoom: 12
}
};
},
mounted() {
this.mapInit();
},
methods: {
mapInit() {
let self = this;
let map = new AMap.Map("mapBox", {
zoom: self.mapData.zoom,
resizeEnable: true,
center: self.mapData.center
});
let marker = new AMap.Marker({
position: self.mapData.center,
map: map
});
}
}
};
</script>
<style>
.ppp {
width: 500px;
height: 300px;
margin: 0 auto;
border: 1px solid deeppink;
}
</style>
3. 更多的功能请自行学习api
原文:https://www.cnblogs.com/qlongbg/p/13274521.html