Vue高德地图粗略使用加踩坑

按照文档配置所有

<div id="container"></div>
<style  scoped>
    #container{
        padding:0px;
        margin: 0px;
        width: 100%;
        height: 800px;
    }
</style>

// npm i @amap/amap-jsapi-loader --save
import AMapLoader from '@amap/amap-jsapi-loader';
data(){
      return{
        map:null,
     } 
 },
methods:{
    initMap(){
        AMapLoader.load({
            key:"",             // 申请好的Web端开发者Key，首次调用 load 时必填
            version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:[''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap)=>{
            this.map = new AMap.Map("container",{  //设置地图容器id
                viewMode:"3D",    //是否为3D地图模式
                zoom:5,           //初始化地图级别
                center:[105.602725,37.076636], //初始化地图中心点位置
            });
        }).catch(e=>{
            console.log(e);
        })
    },
},

相当重要的一步 请配置安全密钥 不配置使用插件根本就不生效

• 在这个文档中并没有提示这一步

window._AMapSecurityConfig = {
  securityJsCode:'***************',
}

去除图标跟copyright

::v-deep .amap-logo {
  display: none;
  opacity: 0 !important;
}

::v-deep .amap-copyright {
  display: none;
  opacity: 0 !important;
}

图层使用

官方示例

//卫星图层
var satellite = new AMap.TileLayer.Satellite();
var roadNet = new AMap.TileLayer.RoadNet();
this.map = new AMap.Map("container", {  //设置地图容器id
  mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
  viewMode: "3D",    //是否为3D地图模式
  zoom: 10,           //初始化地图级别
  center: [111.153531, 37.505033], //初始化地图中心点位置
  layers: [satellite, roadNet]
});

轨迹

轨迹回放
还有一种做法就是一直更新marker得位置 一直remove 然后一直add 会很耗费性能