DiMap/index.html at main · AlwaysTeam/DiMap · GitHub

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
116
117
118
119
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="./images/logo.png" />
    <title>滴滴地图</title>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
    <!-- 加载地图JSAPI脚本 -->
    <script type="text/javascript">
      window._DiMapSecurityConfig = {
        serviceHost: "https://static.zhangsifan.com/_DiMapService/",
      };
    </script>
    <script
      type="text/javascript"
      src="https://lbs.xiaojukeji.com/api/v2/static/loader.js?version=1.0.0"
    ></script>
  </head>

  <body>
    <div id="container"></div>
  </body>
</html>
<script type="text/javascript">
  window.DiMapLoader.load({
    key: "d17b03a54cc2ec446da626a21f0bd719",
  }).then(({ DiMap }) => {
    const map = new DiMap.Map({
      container: "container", // 容器ID
      zoom: "15",
      style: "dimap://styles/normal", // 底图样式文件（url or object）
    });
    let marker = null;
    map.addControl(new DiMap.ScaleControl());
    map.addControl(new DiMap.NavigationControl());
    map.on("click", (e) => {
      console.log("您在[ " + e.lngLat.toArray() + " ]的位置点击了地图！");
      addMarker(e.lngLat);
    });
    map.on("load", async () => {
      const loc = await DiMap.getGeoLocation({
        watch: {
          success(data) {
            console.log("watch", data);
            data && render(data);
          },
        },
      });
      if (!loc) {
        alert("获取定位失败");
        return;
      }

      function loadAndAddImage(imgName, url) {
        return new Promise((resolve) => {
          let img = new Image(40, 48);
          img.crossOrigin = "Anonymous";
          img.onload = () => {
            map.addImage(imgName, img);
            resolve(true);
          };
          img.src = url;
        });
      }
      await loadAndAddImage(
        "green",
        "https://s3-hnapuhdd-cdn.didistatic.com/dimap-web-opensdk-public/jsapi-demo/data/greenVectorMarker.svg"
      );
      const symbolLayer = new DiMap.SymbolLayer({
        layout: {
          "icon-pitch-alignment": "map",
        },
      });
      symbolLayer.addToMap(map);
      let symbolFeature = undefined;
      render(loc);
      function render(loc) {
        const pos = [loc.longitude.toFixed(5), loc.latitude.toFixed(5)];
        console.log("浏览器定位成功!", pos);
        if (!symbolFeature) {
          symbolFeature = new DiMap.SymbolFeature({
            geoData: pos,
            symbolIconImage: "green",
          });
          symbolLayer.addFeature(symbolFeature);
          map.flyTo({
            center: pos,
          });
        } else {
          symbolLayer.updateFeature(symbolFeature.featureId, {
            geoData: pos,
          });
        }
        loc?.heading &&
          map.setLayoutProperty(
            symbolLayer.getLayerId(),
            "icon-rotate",
            loc?.heading
          );
      }
    });

    function addMarker(lngLat) {
      if (marker) marker.remove();
      marker = new DiMap.Marker().setLngLat(lngLat).addTo(map);
    }
  });
</script>