出行助手Vue项目中高德API的使用

本文章是出行助手项目使用高德API的一些经验，见程序代码及注释，
详情请查看高德API

高德地图初始化加载定位到当前城市（具体位置）：

1. 设置一个div挂载高德地图：<div id="map" style="width:900px; height: 900px;border: 1px solid red"></div>
2. 引入高德API：<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=****申请到的KEY值****"></script>

创建地图并初始化到具体位置：

function createTrip() {
      //  创建地图实例，创建的同时可以给地图设置中心点、级别、显示模式、自定义样式等属性：
      map = new window.AMap.Map('map', {   //构造一个地图对象，第一个参数中传入地图容器DIV的ID值，第二个参数是地图初始化参数对象，参数详情参看MapOptions列表。
        resizeEnable: true, // 是否监控地图容器尺寸变化
        // mapStyle: 'amap://styles/light', // 设置地图的显示样式
        zoom: 11, // 初始化地图层级
        // viewMode: '3D', // 地图模式
        // pitch: 75, // 地图俯仰角度，有效范围 0 度- 83 度
        center: [116.402831,39.91582] // 初始地图中心点，故宫
    })
      //  异步加载多个插件:AMap.plugin的第一个参数使用数组即可同时加载引入多个插件。
      //  地图初始化加载的定位只能获取到城市级别信息，如果想获取到具体的位置就要借助浏览器定位。高德JS API提供了AMap.Geolocation插件来实现定位       
      //  组合了旋转、倾斜、复位、缩放在内的地图控件
      map.plugin(['AMap.Geolocation', 'AMap.ControlBar'], function () {
      	var geolocation = new window.AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位，默认:true
          timeout: 10000, // 超过10秒后停止定位，默认&