高德地图特性示例

发表于 更新于 分类于 阅读次数：

基于地图 JS API 2.0

1 点标记

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      #container {
        width: 1200px;
        height: 720px;
      }
      .amap-icon img {
        width: 28px;
        height: 36px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="https://webapi.amap.com/loader.js"></script>
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "9f9d9391b3ba92237652b8a93fe47d96",
      };
      AMapLoader.load({
        key: "f843b51e9bc03fe1f14969aa27e78449",
        version: "2.0",
      })
        .then((AMap) => {
          const gps = [119.418945, 29.24363];
          const map = new AMap.Map("container", {
            center: gps,
            zoom: 13,
          });
          const marker = new AMap.Marker({
            position: gps,
            icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
          });
          map.add(marker);
        })
        .catch((e) => {
          console.error(e);
        });
    </script>
  </body>
</html>

marker-01.png

2 点聚合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      #container {
        width: 1280px;
        height: 720px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="https://webapi.amap.com/loader.js"></script>
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "9f9d9391b3ba92237652b8a93fe47d96",
      };
      AMapLoader.load({
        key: "f843b51e9bc03fe1f14969aa27e78449",
        version: "2.0",
      })
        .then((AMap) => {
          const gps = [116.405285, 39.904989];
          const points = [
            { weight: 1, lnglat: ["116.506647", "39.795337"] },
            { weight: 1, lnglat: ["116.843352", "40.377362"] },
            { weight: 1, lnglat: ["116.637122", "40.324272"] },
            { weight: 1, lnglat: ["116.105381", "39.937183"] },
            { weight: 1, lnglat: ["116.653525", "40.128936"] },
            { weight: 1, lnglat: ["116.486409", "39.921489"] },
            { weight: 1, lnglat: ["116.658603", "39.902486"] },
            { weight: 1, lnglat: ["116.338033", "39.728908"] },
            { weight: 1, lnglat: ["116.235906", "40.218085"] },
            { weight: 1, lnglat: ["116.366794", "39.915309"] },
            { weight: 1, lnglat: ["116.418757", "39.917544"] },
            { weight: 1, lnglat: ["116.139157", "39.735535"] },
            { weight: 1, lnglat: ["116.195445", "39.914601"] },
            { weight: 1, lnglat: ["116.310316", "39.956074"] },
            { weight: 1, lnglat: ["116.286968", "39.863642"] },
          ];

          const map = new AMap.Map("container", {
            center: gps,
            zoom: 8,
          });
          const _renderMarker = function (context) {
            var content =
              '<img width="14" height="18" src="https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png"></img>';
            context.marker.setContent(content);
          };
          map.plugin(["AMap.MarkerCluster"], function () {
            cluster = new AMap.MarkerCluster(map, points, {
              gridSize: 60,
              renderMarker: _renderMarker,
            });
          });
        })
        .catch((e) => {
          console.error(e);
        });
    </script>
  </body>
</html>

markerCluster-01.png

3 多边形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      #container {
        width: 1200px;
        height: 720px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="https://webapi.amap.com/loader.js"></script>
    <script src="https://a.amap.com/jsapi_demos/static/geojson/shanghai.js"></script>
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "9f9d9391b3ba92237652b8a93fe47d96",
      };
      AMapLoader.load({
        key: "f843b51e9bc03fe1f14969aa27e78449",
        version: "2.0",
      })
        .then((AMap) => {
          const gps = [120.311244, 31.490757];
          const map = new AMap.Map("container", {
            center: gps,
            zoom: 8.8,
          });
          const polygon = new AMap.Polygon({
            path: wuxi,
            fillColor: "#ccebc5",
            strokeStyle: "dashed",
          });
          map.add(polygon);
        })
        .catch((e) => {
          console.error(e);
        });
    </script>
  </body>
</html>

polygon-01.png

4 轨迹回放

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      #container {
        width: 1280px;
        height: 720px;
      }
      .amap-icon img {
        width: 26px;
        height: 52px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="https://webapi.amap.com/loader.js"></script>
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "9f9d9391b3ba92237652b8a93fe47d96",
      };
      AMapLoader.load({
        key: "f843b51e9bc03fe1f14969aa27e78449",
        version: "2.0",
      })
        .then((AMap) => {
          AMap.plugin("AMap.MoveAnimation", function () {
            const gps = [116.478935, 39.997761];
            const track_points = [
              [116.478935, 39.997761],
              [116.478939, 39.997825],
              [116.478912, 39.998549],
              [116.478912, 39.998549],
              [116.478998, 39.998555],
              [116.478998, 39.998555],
              [116.479282, 39.99856],
              [116.479658, 39.998528],
              [116.480151, 39.998453],
              [116.480784, 39.998302],
              [116.480784, 39.998302],
              [116.481149, 39.998184],
              [116.481573, 39.997997],
              [116.481863, 39.997846],
              [116.482072, 39.997718],
              [116.482362, 39.997718],
              [116.483633, 39.998935],
              [116.48367, 39.998968],
              [116.484648, 39.999861],
            ];

            const map = new AMap.Map("container", {
              center: gps,
              zoom: 17,
            });

            const marker = new AMap.Marker({
              position: gps,
              icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
              offset: new AMap.Pixel(-13, -26),
            });
            marker.on("moving", function (e) {
              map.setCenter(e.target.getPosition(), true);
            });
            map.add(marker);

            marker.moveAlong(track_points, {
              duration: 500,
              autoRotation: true,
            });
          }).catch((e) => {
            console.log(e);
          });
        })
        .catch((e) => {
          console.error(e);
        });
    </script>
  </body>
</html>

moveAnimation-01.png

5 动态巡航

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      #container {
        width: 1280px;
        height: 720px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="https://webapi.amap.com/loader.js"></script>
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "9f9d9391b3ba92237652b8a93fe47d96",
      };
      AMapLoader.load({
        key: "f843b51e9bc03fe1f14969aa27e78449",
        version: "2.0",
        AMapUI: {
          version: "1.1",
          plugins: ["overlay/SimpleMarker"],
        },
      })
        .then((AMap) => {
          AMapUI.load(
            ["ui/misc/PathSimplifier", "lib/$"],
            function (PathSimplifier, $) {
              const gps = [116.478935, 39.997761];
              const path_data = [
                {
                  name: "轨迹巡航",
                  path: [
                    [116.478935, 39.997761],
                    [116.478939, 39.997825],
                    [116.478912, 39.998549],
                    [116.478912, 39.998549],
                    [116.478998, 39.998555],
                    [116.478998, 39.998555],
                    [116.479282, 39.99856],
                    [116.479658, 39.998528],
                    [116.480151, 39.998453],
                    [116.480784, 39.998302],
                    [116.480784, 39.998302],
                    [116.481149, 39.998184],
                    [116.481573, 39.997997],
                    [116.481863, 39.997846],
                    [116.482072, 39.997718],
                    [116.482362, 39.997718],
                    [116.483633, 39.998935],
                    [116.48367, 39.998968],
                    [116.484648, 39.999861],
                  ],
                },
              ];

              const map = new AMap.Map("container", {
                center: gps,
                zoom: 17,
              });

              const pathSimplifierIns = new PathSimplifier({
                map: map,
                autoSetFitView: false,
                getPath: function (pathData, pathIndex) {
                  return pathData.path;
                },
                renderOptions: {
                  pathNavigatorStyle: {
                    width: 26,
                    height: 52,
                    content: PathSimplifier.Render.Canvas.getImageContent(
                      "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png"
                    ),
                    pathLinePassedStyle: {
                      strokeStyle: "#00000000",
                      borderStyle: "#00000000",
                    },
                  },
                  getPathStyle: function (pathItem, zoom) {
                    return {
                      pathLineStyle: {
                        strokeStyle: "#00000000",
                        borderStyle: "#00000000",
                      },
                      startPointStyle: {
                        fillStyle: "",
                        strokeStyle: "",
                      },
                      endPointStyle: {
                        fillStyle: "",
                        strokeStyle: "",
                      },
                    };
                  },
                },
              });
              pathSimplifierIns.setData(path_data);

              const navg = pathSimplifierIns.createPathNavigator(0, {
                loop: true,
                speed: 120,
              });
              navg.start();
            }
          );
        })
        .catch((e) => {
          console.error(e);
        });
    </script>
  </body>
</html>

pathSimplifier-01.png

6 路线规划

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      #container {
        width: 1280px;
        height: 720px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="https://webapi.amap.com/loader.js"></script>
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "9f9d9391b3ba92237652b8a93fe47d96",
      };
      AMapLoader.load({
        key: "f843b51e9bc03fe1f14969aa27e78449",
        version: "2.0",
      })
        .then((AMap) => {
          const gps = [116.397428, 39.90923];
          const map = new AMap.Map("container", {
            center: gps,
            zoom: 13,
          });
          AMap.plugin("AMap.Driving", function () {
            const driving = new AMap.Driving({
              map: map,
            });
            const points = [
              { keyword: "北京市地震局（公交站）", city: "北京" }, //起始点
              { keyword: "北京站", city: "北京" }, //设置途经点参数，最多支持传入16个途经点
              { keyword: "亦庄文化园（地铁站）", city: "北京" }, //终点
            ];
            driving.search(points, function (status, result) {});
          });
        })
        .catch((e) => {
          console.error(e);
        });
    </script>
  </body>
</html>

driving-01.png