vue使用高德地图

**概括：**示例效果：
一、注册开发者账号并获得Key

1、进入官网https://lbs.amap.com/，注册并登录

2、登陆之后，点击控制台进入 [ 应用管理 ] 页面 [ 创建新应用 ]

3、获得应用 Key值，[ 服务平台 ]一项选择 [ Web 端 ( JSAPI )或 Web 服务 ]

二.安装插件和引入

1.在index.html中引用js文件，在头部引入

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=刚刚申请的key值"></script>

2.命令行：npm install vue-amap --save
在main.js里引入
import AMap from ‘vue-amap’;
Vue.use(AMap);

三.组件使用地图
1.创建div

<div id="all-map" class="map" ></div>

.map{
            width: 100%;
            height: 600px;
}

2.在methods中定义创建地图的方法

地图样式属性 mapStyle: ‘amap://styles/自定义的()’, //设置地图的显示样式

created(){
this.GaodeMap()
},
  GaodeMap() {
      var map = new AMap.Map("all-map", {
        // mapStyle: "amap://styles/darkblue", //设置地图的显示样式
        center: [116.197428, 39.90923], // [纬度，经度]
        resizeEnable: true,
        zoom: 11,
        cursor: "hand" // 鼠标在地图上的表现形式，小手
      });
      //实时路况图层
      var trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10,
        zooms: [7, 22]
      });
      trafficLayer.setMap(map);

      AMap.plugin("AMap.Driving", function() {
        var driving = new AMap.Driving({
          // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
          policy: AMap.DrivingPolicy.LEAST_TIME,
          // map 指定将路线规划方案绘制到对应的AMap.Map对象上
          map: map,
          // panel 指定将结构化的路线详情数据显示的对应的DOM上，传入值需是DOM的ID
          panel: "panel"
        });

        var points = [
          { keyword: "北京市地震局（公交站）", city: "北京" },
          { keyword: "亦庄文化园（地铁站）", city: "北京" }
        ];

        // 搜索完成后，将自动绘制路线到地图上
        driving.search(points);
      });
      //       var map = new AMap.Driving("all-map",{
      //   // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
      //   policy: AMap.DrivingPolicy.LEAST_TIME
      // })
      //精确   街  市  省  国
      AMap.plugin(["AMap.ToolBar", "AMap.Scale"], function() {
        map.addControl(new AMap.ToolBar());
        map.addControl(new AMap.Scale());
      });
    },