返回

新手入门：从零搭建您的地图Demo

前端

构建腾讯地图 Demo：一步步指南

创建腾讯地图 API 密钥

要使用腾讯地图 API，您需要先创建一个 API 密钥。前往腾讯地图开放平台网站，点击“控制台”按钮，然后点击“创建应用”按钮。填写应用名称和，然后点击“确定”按钮。您的 API 密钥将显示在页面上。

创建 HTML 文件

接下来，使用文本编辑器创建一个新的 HTML 文件。粘贴以下代码：

<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8">
  <script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_API_KEY"></script>
</head>
<body>
  <div id="map" style="width: 100%; height: 100%"></div>
  <script>
    var map = new qq.maps.Map(document.getElementById("map"), {
      center: new qq.maps.LatLng(39.915, 116.397),
      zoom: 13
    });
  </script>
</body>
</html>

别忘了将 YOUR_API_KEY 替换为您自己的 API 密钥。

运行 HTML 文件

将 HTML 文件保存到您的计算机，然后使用 Web 浏览器打开它。地图将显示在浏览器窗口中。

添加标记

要在地图上添加标记，请在 <body> 标签中添加以下代码：

<script>
  var marker = new qq.maps.Marker({
    position: new qq.maps.LatLng(39.915, 116.397),
    map: map
  });
</script>

添加路线

要在地图上添加路线，请在 <body> 标签中添加以下代码：

<script>
  var line = new qq.maps.Polyline({
    path: [
      new qq.maps.LatLng(39.915, 116.397),
      new qq.maps.LatLng(39.925, 116.407)
    ],
    strokeColor: "#FF0000",
    strokeWeight: 5,
    map: map
  });
</script>

添加多边形

要在地图上添加多边形，请在 <body> 标签中添加以下代码：

<script>
  var polygon = new qq.maps.Polygon({
    path: [
      new qq.maps.LatLng(39.915, 116.397),
      new qq.maps.LatLng(39.925, 116.407),
      new qq.maps.LatLng(39.935, 116.417)
    ],
    strokeColor: "#0000FF",
    strokeWeight: 5,
    fillColor: "#00FF00",
    map: map
  });
</script>

自定义地图

现在，您可以根据需要自定义地图。您可以添加更多标记、路线和多边形，也可以在地图上添加控件，如缩放控件和比例尺控件。

常见问题解答

  • 如何更改地图的中心点？

    • 使用 map.setCenter(new qq.maps.LatLng(latitude, longitude)) 方法。

  • 如何更改地图的缩放级别？

    • 使用 map.setZoom(zoomLevel) 方法。

  • 如何添加自定义标记图标？

    • 使用 marker.setIcon(new qq.maps.Icon({image: 'path/to/image.png'})) 方法。

  • 如何在地图上添加事件监听器？

    • 使用 map.addEventListener('event', function) 方法。

  • 如何从地图中删除标记？

    • 使用 marker.setMap(null) 方法。