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>