vue 高德地图 不同区域显示不同颜色_vue2.0使用高德地图绘制路线图记录

使用前准备 : 高德地图key

使用插件: vue-amap

1.npm安装vue-amap

npm install vue-amap --save

2 在mai.js中引入

import AMap from 'vue-amap';
Vue.use(AMap);
AMap.initAMapApiLoader({
    
  key: "自己申请的key",
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4',  //这里是vue-amp 的版本号
//这里是高德ui组件的版本号3
  uiVersion: '1.0'  //添加 uiVersion 的脚本版本号  这个很重要!必须要引入

});


new Vue({
    
  el: '#app',
  router,
  render: h => h(App),
  created() {
    
    if (_global_.UI) {
    
      Vue.prototype.GLOBAL = _global_
    } else {
    
      Vue.prototype.GLOBAL = {
    
        UI: {}
      }
    }
  },
})

3.在自己创建的组件页面使用

贴个地址:轨迹展示-海量数据-参考手册-AMapUI 组件库 | 高德地图API

<template>
  <!-- <div id="map-location"></div> -->
    <div class="app">
    <div ref="map" id="map"  style="width: 100%; height: 600PX;"></div>
  </div>

</template>
<script>
//引入高德地图ui组件
import {
     lazyAMapApiLoaderInstance } from "vue-amap"; 
import carUrl from "../../assets/images/car1.png";
var map;
export default {
    
  data() {
    
    return {
    
      navgtrSpeed:100000, //播放速度
      navgtr:"",
      pathLsit:""
    };
  },