业务背景：

电商行业，希望通过线上订单的地址信息，实现在地图上标注，看下线上客户的分布区域。

线下门店：查看自己线下门店覆盖区域

实现效果：

以下分别为指令图，门店图，某季度客户图（均为测试数据）

配置：

指令：

1.找对应技术支持获取指令（这部分，代码不需要看，请直接跳过）

2.个人开发者，目前无分享途径，自己动手，丰衣足食（代码块在下面，有问题可以问我）

   涉及技术：基于高德地图提供的 api

   文档链接： https://lbs.amap.com/api/javascript-api-v2/tutorails/display-a-map

   HTML文件：

   创建地图：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"/>
    <title>HELLO, AMAP!</title>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "xxxxxxxxxxxxxxxxxxx",//安全密钥
      };
    </script>
    <script src="https://webapi.amap.com/loader.js"></script> 
    <script type="text/javascript">
      AMapLoader.load({
        key: "xxxxxxxxxxxxxxxxxxx", // 替换为您的高德地图应用key
        version: "2.0", // 指定要加载的 JS API 的版本
      })
      .then((AMap) => {
        // JS API 加载完成后，创建地图实例
        const map = new AMap.Map('container', {
          zoom: 11, // 初始缩放级别
          center: [116.397428,39.90923
], // 初始中心点坐标
        });
        //当前标点数量：0，当前编号：0。
        //这是一个开始标点定位


        map.setFitView();

      })
      .catch((e) => {
        console.error(e); // 加载错误提示
      });
      //多个点实例组成的数组

    
    </script>

    
  </body>
</html>

标点代码，请放到上面的  ” //这是一个开始标点定位   “的下一行

            
        //这是一个定位标点，
        //标点序号： 
        const marker1 = new AMap.Marker({
          position: new AMap.LngLat(116.39,39.9),  //这里写标点定位
          title: "xxxxx",//请输入标点文本（随便写）
        });
        map.add(marker1);
        //这是一个结束定位标点

获取高德地图应用key：

https://console.amap.com/dev/key/app

https://console.amap.com/dev/key/app

分别添加Web端(JS api) 和 Web服务

Web端(JS api) ：用于创建地图，标点等

Web服务：用于转码，例如地址转经纬度，经纬度转地址（注意：每个账号每天只能转换5000次，解决：可以用多个高德账号添加不同key，富哥直接买会员）

Xampp下载/安装

下载安装教程

 https://blog.csdn.net/2301_79896143/article/details/135050363

安装后无法启动解决方案：

https://blog.csdn.net/qq_41664447/article/details/81202740

   改端口后，需对指令做修改，指令-展示地图，链接中localhost后需带上对应端口号

没什么了，有问题问云烟