1.获取key值
注册成为高德开发者需要分三步:
第一步,注册高德开发者;
第二步,去控制台创建应用;
第三步,获取Key
2.修改配置文件 webpack.base.conf.js
externals: { 'AMap': 'AMap' }
3.在index.html 中引入地图插件
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script>
4.新建一个mapInfo.vue的组件
<template> <div id="map" style="width:100%; height:5rem"></div> </template> <script> import AMap from 'AMap' export default { data(){ return{ map:null, marker:null } }, mounted: function () { this.init() }, methods: { init: function () { let self =this self.map = new AMap.Map('map', { center: [116.313061, 39.979386], resizeEnable: true, zoom: 16 }) self.marker = new AMap.Marker({ map:self.map, position: new AMap.LngLat('116.313061', '39.979386') }) AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () { self.map.addControl(new AMap.ToolBar()) self.map.addControl(new AMap.Scale()) }) } } } </script> <style scoped> </style>
地图组件开发完成