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

最新推荐文章于 2024-04-27 13:33:08 发布

weixin_34194087

最新推荐文章于 2024-04-27 13:33:08 发布

阅读量356

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/2607135/blog/1794665

版权

2019独角兽企业重金招聘Python工程师标准>>>

安装

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>

注：还未配置成功！

转载于:https://my.oschina.net/u/2607135/blog/1794665