VUE 引入高德地图

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

  1. 首先入口文件 index.html 引入高德地图
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
  1. webpack配置 ./build/webpack.base.conf.js 加载高德地图
    externals: {
        'AMap': 'window.AMap'
    }
  1. 在页面body里你想展示地图的地方创建一个div 容器,并指定id标识:
<template>
    <div class="hello">
        <div id="container"></div>
    </div>
</template>
  1. 可以使用CSS为地图容器设置合适的大小,比如:
<style scoped>
#container {
    width:300px;
    height: 180px;
}
</style>
  1. 创建地图
<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 配置
  • 注意声明高德地图的时机
Comments
Write a Comment