TencentMap/index.html at main · AlwaysTeam/TencentMap · 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!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/favicon.ico" />
    <title>地图选点 - 腾讯地图</title>
    <script type="text/javascript">
      window._TMapSecurityConfig = {
        serviceHost: "https://static.zhangsifan.com/_TMapService",
      };
    </script>
    <script src="https://map.qq.com/api/gljs?v=1.exp&libraries=service"></script>
    <script src="https://mapapi.qq.com/web/lbs/h5-components/geolocation/geolocation.min.js"></script>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      #mapContainer {
        position: relative;
        width: 100%;
        height: 100%;
      }

      .btnContainer {
        position: absolute;
        left: 20px;
        top: 20px;
        z-index: 10000;
      }

      .btnContainer button {
        padding: 10px 14px;
        box-sizing: border-box;
        border: none;
        background-color: #919aac;
        border-radius: 2px;
        color: #fff;
        font-size: 14px;
        line-height: 14px;
        cursor: pointer;
      }
    </style>
  </head>

  <body onLoad="initMap()">
    <div class="btnContainer">
      <button onClick="window.open('./car_track.html','_blank')">
        车辆轨迹
      </button>
      <button onClick="window.open('./planning.html','_blank')">
        路径规划
      </button>
    </div>
    <div id="mapContainer"></div>
    <script>
      var map;
      var markerLayer;
      function initMap() {
        map = new TMap.Map(document.getElementById("mapContainer"), {
          center: new TMap.LatLng(39.9069659960541, 116.39749745438792),
          zoom: 15,
        });

        const control = map.getControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
        control.setNumVisible(true);

        markerLayer = new TMap.MultiMarker({
          map: map,
          styles: {
            myStyle: new TMap.MarkerStyle({
              width: 25,
              height: 35,
              anchor: { x: 16, y: 32 },
            }),
          },
          geometries: [],
        });

        map.on("click", (evt) => {
          addMarker(evt.latLng.lat, evt.latLng.lng);
          console.log(
            "点击位置的经纬度为：" + evt.latLng.lat + "," + evt.latLng.lng
          );
        });

        getLocation();
      }

      function addMarker(lat, lng) {
        markerLayer.setGeometries([]);
        markerLayer.add({
          position: new TMap.LatLng(lat, lng),
        });
        map.setCenter(new TMap.LatLng(lat, lng));
      }
      function getLocation() {
        const geoInstance = new window.LBS.WebComponent.Geolocation({
          domain: "https://static.zhangsifan.com/_TMapService/service",
          referer: "h5-geolocation-demo-4",
        });
        geoInstance.getLocation(
          (result) => {
            addMarker(result.lat, result.lng);
            console.log(
              "浏览器位置的经纬度为：" + result.lat + "," + result.lng
            );
          },
          (error) => {
            console.log("浏览器获取位置失败，使用IP定位");
            ipInfo();
          },
          { timeout: 6000, highAccuracy: true }
        );
      }
      function ipInfo() {
        fetch("https://api.zhangsifan.com/utils/getipinfo")
          .then((response) => response.json())
          .then((data) => {
            var ipLocation = new TMap.service.IPLocation();
            ipLocation
              .locate({
                ip: data.result.ip,
              })
              .then(({ result }) => {
                addMarker(result.location.lat, result.location.lng);
                console.log(
                  "IP位置的经纬度为：" +
                    result.location.lat +
                    "," +
                    result.location.lng
                );
              });
          })
          .catch((error) =>
            console.error("Error fetching IP location:", error)
          );
      }
    </script>
  </body>
</html>