VUE+高德地图

vue+高德地图效果：

 

1.注册开发者账号

获取Key-创建工程-开发指南-Web服务 API|高德地图API (amap.com)

2.与前端框架配合

vue：JSAPI结合Vue使用-JSAPI与前端框架结合-教程-地图 JS API v2.0|高德地图API (amap.com)

react:JSAPI结合React使用-JSAPI与前端框架结合-教程-地图 JS API v2.0|高德地图API (amap.com)

3.代码

<template>
<el-container>
    <el-main>
         <div id="container"></div>
    </el-main>
</el-container>
</template>

import AMapLoader from '@amap/amap-jsapi-loader'
export default {
    data() {
        return {
            map: null,
            marker:null
        }
    },
    methods: {
        initMap() {
            AMapLoader.load({
                key: '3f319f672b55a6f4df9f26f85e348237', 
                version: '2.0',
        }).then(AMap=> {
                this.map = new AMap.Map('container', {
                    resizeEnable: true,
                    zoom: 17, 
                    center: [121.912543,30.866036],
                    pitch:50, 
                    viewMode:'3D'
             })
                this.marker =  new AMap.Marker({
                    icon: '//a.amap.com/jsapi_demos/static/
                            demo-center/icons/poi-marker-red.png',
                    position: [121.911800,30.866688],
              })
                this.marker.setMap(this.map)
        })
      },
  },
    mounted() {
        this.initMap()
    }
}

#container{
        width: 1080px;
        height: 400px;
        border-radius: 1%;
    }