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>