VUE(10) : 使用高德地图

参考 : JSAPI结合Vue使用-JSAPI与前端框架结合-教程-地图 JS API v2.0 | 高德地图API

 

1.开发准备

1.1.  首先，注册开发者账号，成为高德开放平台开发者

1.2.  登陆之后，在进入「应用管理」 页面「创建新应用」

1.3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」。

1.4. 添加成功后，获取到 Key 值。

 2.安装

npm i @amap/amap-jsapi-loader --save

 3.完整代码(填充key和安全密钥)

<template>
     <div id="container"></div>
</template>
<script src="https://webapi.amap.com/loader.js"></script>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'

window._AMapSecurityConfig = {
  securityJsCode:'安全密钥',
}
export default {
    name:"mapcomtaint",
    data(){
          return{
            map:null,
         }
     },
    create(){

    },
    methods:{
      initMap(){
        AMapLoader.load({
            key:"你的Key",             // 申请好的Web端开发者Key，首次调用 load 时必填
            version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:[''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap)=>{
            this.map = new AMap.Map("container",{  //设置地图容器id
                viewMode:"3D",    //是否为3D地图模式
                zoom:5,           //初始化地图级别
                center:[105.602725,37.076636], //初始化地图中心点位置
            });
        }).catch(e=>{
            console.log(e);
        })
      },
    },
    mounted(){
        //DOM初始化完成进行地图初始化
        this.initMap();
    }
}
</script>
<style  scoped>
    #container{
        padding:0px;
        margin: 0px;
        width: 100%;
        height: 800px;
    }
</style>