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>