vue2.0组件上使用高德地图

安装

npm install vue-amap --save

引入vue-amap

vue-amap的引入方式很简单，在入口文件中加入下面内容

// 引入vue-amap
import AMap from 'vue-amap';
Vue.use(AMap);

// 初始化vue-amap
AMap.initAMapApiLoader({
    // 申请的高德key
    key: 'YOUR_KEY',
    // 插件集合
    plugin: ['']
});

显示地图

在模版中加入vue-amap的地图组件

<template>
    <div>
        <div id="container" style="width:500px; height:300px"></div>
    </div>
</template>
<script>
    import AMap from 'AMap'
    var map
    export default {
        mounted: function () {
            this.init()
        },
        methods: {
            init: function () {
                map = new AMap.Map('container', {
                    center: [116.397428, 39.90923],
                    resizeEnable: true,
                    zoom: 10
                })
                AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
                    map.addControl(new AMap.ToolBar())
                    map.addControl(new AMap.Scale())
                })
            }
        }
    }
</script>
<style>
</style>

注：还未配置成功！