1.引入高德地图(在vue的index.html)
<!--1 引入高德地图 -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=你申请的key"></script>
2.创建项目页面(完整代码)
<template>
<div id="container">
</div>
</template>
<script>
export default {
data() {
return {
//要标记的所有点的经纬度
lnglats: [
[108.909074, 34.254225],
[108.910766, 34.254348],
[108.910495, 34.253531],
[108.909502, 34.253571],
],
};
},
mounted() {
this.setMapChart();
},
methods: {
//创建地图实例
setMapChart() {
//地图实例
let map = new AMap.Map("container", {
resizeEnable: true, //自适应大小
zoom: 13, //初始化视窗
pitch: 70, // 地图俯仰角度,有效范围 0 度- 83 度
viewMode: "3D", // 地图模式
});
// AMap是高德