vue中使用高德地图（一）

之前在项目中简单的使用过高德的地图来显示一些路线的数据，简单的整理一下

1、通过NPM安装vue-amap模块：

npm install --save vue-amap

2、在main.js中引用vue-amap：

import GaodeMap from 'vue-amap'

Vue.use(GaodeMap);

VueAMap.initAMapApiLoader({ key: '申请的高德地图Key'，
 v:'默认的高德的版本号，比如1.4.4' });

3、在vue组件中使用：<template>  <div>

 <el-amap :center='center' :zoom='zoom'
 id="container"
 :events="events"
 > <el-amap-marker :position="center" :label="label" ></el-amap-marker> </el-amap> </div> </template> <script> data() { return { center: [116.397428, 39.90923], zoom: 15, label:{ content: '自定义标题', offset:[10,12] } } }，
methods: {
 // 初始化地图
 initMap (map) {
 var map = new AMap.Map("container", {
 zoomEnable:true, //是否禁止缩放
 zoom: 12, //缩放比例
 dragEnable: false,//禁止拖动
 cursor: 'hand' // 鼠标在地图上的表现形式，小手

 });
 // 初始化工具条
 map.plugin(["AMap.ToolBar"], function() {
 map.addControl(new AMap.ToolBar());
 });

 }
} </script>