高德地图在实际应用的问题

1. 首先，注册开发者账号，成为高德开放平台开发者
2. 登陆之后，在进入「应用管理」 页面「创建新应用」
3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI )

引入项目

JS API 引入

在 html 文件 通过 <script> 引入;

<div id="content"></div>
...

<style>
  #container {width:300px; height: 180px; }  
</style>
...

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script>
  window.onLoad  = function(){
    var map = new AMap.Map('container');
  }
  var url = 'https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=onLoad';
  var jsapi = doc.createElement('script');
  jsapi.charset = 'utf-8';
  jsapi.src = url;
  document.head.appendChild(jsapi);
</script>

Require JS 引入

通过 npm 安装库引入项目，再通过 import 引入

npm install @amap/amap-jsapi-loader

import AMapLoader from "@amap/amap-jsapi-loader";
import HC from '@/static/img.png'

//初始化地图
initMap() {
  AMapLoader.load({
    key: "5daef797f2a3134241fd7dee3ba06566",  // 申请的key值
    //version: "2.0", // 默认为 1.4.15。建议不使用2.0 兼容性太差
    plugins: ["AMap.MoveAnimation"]    //插件列表
  })
  .then(AMap => {
    
    //地图实例
    var map = new AMap.Map("mymap", {
      zoom: 15,       //初始化地图层级
      resizeEnable: true     //调整大小
      center: [114.22237, 22.33357],   //地图中心
    });

    //Marker覆盖图：车
    var marker = new AMap.Marker({
      map: map,  //地图实例
      position: [114.22237, 22.33357], //覆盖物定位
      icon: new AMap.Icon({   //图标配置
        image: HC,            //图片地址
        size: new AMap.Size(60, 50),   //图标大小
        imageSize: new AMap.Size(60, 50)
      }),
      offset: new AMap.Pixel(-16, -25), //位置偏移
      autoRotation: true,     //是否根据路线调整位置
      angle: 0
    });

    //实例化信息窗体
    var content = `
      <div>
        <p style="margin:5px">订单号：<span style="font-weight:bold">ZG80191223444</span></p>
        <p style="margin:5px">车牌号：<span style="font-weight:bold">粤ZY12港</span></p>
        <p style="margin:5px">GPS时间：<span style="font-weight:bold">2021-01-01 14:12:45</span></p>
        <p style="margin:5px">司机信息：<span style="font-weight:bold">朱文静</span></p>
        <p style="margin:5px">速度：<span style="font-weight:bold">52KM/H</span></p>
        <p style="margin:5px">里程：<span style="font-weight:bold">7270.10KM</span></p>
        <p style="margin:5px">启动/熄火时间：<span style="font-weight:bold">33分钟54秒</span></p>
        <p style="margin:5px">客户：<span style="font-weight:bold">张小红</span></p>
        <p style="margin:5px">货物信息：<span style="font-weight:bold">衬衫</span></p>
        <p style="margin:5px">提货地址：<span style="font-weight:bold">广东省深圳市龙岗区南湾街道理</span></p>
        <p style="margin:5px">送货地址：<span style="font-weight:bold">广东省深圳市龙岗区南湾街道理兆产业园232.965连理栋路2000米处</span></p>
      </div>
    `
    var infoWindow = this.titleCon(AMap, content);
    AMap.event.addListener(marker, "click", function() {
      infoWindow.open(map, marker.getPosition());
    });

    // 起点标记
    var viaMarker = new AMap.Marker({
      position: new AMap.LngLat(114.22237, 22.33357), // 经纬度转换为像素坐标
      icon: new AMap.Icon({    //图标配置
        image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
        size: new AMap.Size(135, 40),
        imageSize: new AMap.Size(135, 40),
        imageOffset: new AMap.Pixel(-9, -3)
      }),
      offset: new AMap.Pixel(-18, -37)
    });
    map.add(viaMarker);
      //添加 movseover 事件
    AMap.event.addListener(viaMarker, "mouseover", function() {
      viaMarker.setLabel({
        direction:'top',
        offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
        content: "<div style='margin:5px'>广东省深圳市龙岗区南湾街道理</div>", //设置文本标注内容
      });
    });
      //添加 mouseout 事件
    AMap.event.addListener(viaMarker, "mouseout", function() {
      viaMarker.setLabel({
        direction:'top',
        offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
        content: "", //设置文本标注内容
      });
    });

    // 绘制轨迹
    var passedPolyline = new AMap.Polyline({
      map: map,
      path: [[114.22237,22.33357],[114.22237,22.33357]],  //根据坐标绘制轨迹
      showDir: true,
      strokeColor: "#28F", //线颜色
      // strokeOpacity: 1,     //线透明度
      strokeWeight: 6 //线宽
      // strokeStyle: "solid"  //线样式
    });
    // 绑定事件。线随车移动动
    marker.on("moving", function(e) {
      passedPolyline.setPath(e.passedPath);
    });
    setTimeout(() => {
      marker.moveAlong(lineArr, 200);
    }, 2000);

  })
}