VUE 引入高德地图

基于 vue-cli 生成项目讲解，自己构建的项目类似。

首先入口文件 index.html 引入高德地图

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>

webpack配置 ./build/webpack.base.conf.js 加载高德地图

    externals: {
        'AMap': 'window.AMap'
    }

在页面body里你想展示地图的地方创建一个div 容器，并指定id标识:

<template>
    <div class="hello">
        <div id="container"></div>
    </div>
</template>

可以使用CSS为地图容器设置合适的大小，比如:

<style scoped>
#container {
    width:300px;
    height: 180px;
}
</style>

创建地图

<script>
import AMap from 'AMap'
export default {
    name: 'hello',
    data() {
        return {}
    },
    mounted: function() {
        new AMap.Map('container', {
            features: ['bg', 'road', 'building'],
            zoom: 16,
            center: [116.39, 39.9] 
        })
    },
}
</script>

就这样简单引入就可以正常使用高德地图了，两个比较重要的地方

注意修改 webpack 配置
注意声明高德地图的时机

分类