Vue 2.x 使用高德地图
高德地图 开放平台
1.高德开放平台 -- 注册账号
2.创建key和安全秘钥
2. 1 控制台 -- 应用管理中 -- 创建新应用(应用名 与 应用类型)
2.2 添加 -- key名 -- 服务平台(web端JS API)-- 同意 -- 提交 创建key和安全秘钥
创建Vue项目
1.在项目的index.html 中引入
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
2.创建XXX.vue文件
<template>
<div id="container" style="height:500px; overflow:hidden;"></div>
</template>
3.渲染到页面上
<script >
export default {
mounted() {
var map = new AMap.Map('container', {
zoom:11, //级别 缩放比例3--17
center: [116.397428,39.90923], //中心点坐标 北京天安门坐标 116.397428, 39.90923
viewMode:'3D'//使用3D视图
});
}
}
</script>