js 高德地图实现只展示中国和某个省

大G哥

于 2024-11-21 14:42:11 发布

阅读量977

点赞数 20

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Java_fenxiang/article/details/143959355

要在高德地图中只展示中国和河南省的区域，你需要进行地图的区域限制配置。高德地图 JavaScript API 提供了setCity方法来设置默认城市，同时你也可以通过区域控制来限制显示特定区域。

步骤概述：

初始化地图：设置地图的初始显示位置为中国。
限制显示范围：设置地图的显示范围为中国和河南省。
设置默认城市：确保初始视图集中在中国，特别是河南省。

实现步骤：

1. 引入高德地图 API

首先，你需要在 HTML 页面中引入高德地图的 JavaScript API。你可以通过以下方式引入：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>高德地图示例</title>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德API密钥"></script>
  <style>
    #container {
      width: 100%;
      height: 500px;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script src="main.js"></script>
</body>
</html>

替换 "你的高德API密钥" 为你自己的高德 API 密钥。

2. 创建地图并设置初始显示区域

在 main.js 中，进行地图初始化并设置显示区域为中国和河南省。

// 创建地图实例
var map = new AMap.Map('container', {
  zoom: 6, // 设置缩放级别，6适合查看省级区域
  center: [113.6654, 34.757975], // 河南省的中心坐标，(113.6654, 34.757975)
  viewMode: '3D' // 3D视图模式
});

// 设置默认城市为河南省
map.setCity({
  city: "郑州", // 设置默认城市为郑州(河南省的省会)
  level: 8 // 设置视图级别为8，适合显示河南省
});

3. 限制显示中国和河南省

高德地图 API 允许设置地图的“区域限制”，也就是说你可以指定地图只能显示中国及其某个省份的区域。

如果要让地图只能显示中国和河南省区域，您可以通过设置地图的 区域限制 来实现：

// 设置地图区域限制，只展示中国和河南省
map.setBounds(new AMap.Bounds(
  new AMap.LngLat(110.0, 31.0),  // 左下角坐标 (河南省的左下角)
  new AMap.LngLat(116.0, 37.0)   // 右上角坐标 (河南省的右上角)
));

这里通过setBounds方法设置了一个包含河南省的大致区域范围，您可以根据实际需要调整经纬度边界。这样可以确保地图缩放时，只能在中国和河南省的区域内进行拖动和缩放。

4. 设置其他限制(可选)

如果需要进一步控制地图的显示，可以设置地图的 缩放级别，以及 拖拽限制。例如，可以使用 setZoom 来限制缩放级别，确保不会显示超过中国或河南省范围的区域。

// 限制地图缩放级别(可以调整合适的缩放级别)
map.setZoom(6);

// 禁止拖动到中国以外的区域
map.setLimitBounds(new AMap.Bounds(
  new AMap.LngLat(110.0, 20.0),  // 左下角坐标 (限制区域的左下角)
  new AMap.LngLat(120.0, 45.0)   // 右上角坐标 (限制区域的右上角)
));

通过这种方式，可以确保用户只能在中国和河南省的范围内操作地图。

代码总结

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>高德地图显示中国和河南省</title>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德API密钥"></script>
  <style>
    #container {
      width: 100%;
      height: 500px;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script>
    // 创建地图实例
    var map = new AMap.Map('container', {
      zoom: 6, // 设置初始缩放级别
      center: [113.6654, 34.757975], // 河南省的中心坐标
      viewMode: '3D' // 3D视图
    });

    // 设置默认城市为河南省郑州
    map.setCity({
      city: "郑州", // 默认城市
      level: 8 // 设置视图级别
    });

    // 限制地图显示区域为中国和河南省
    map.setBounds(new AMap.Bounds(
      new AMap.LngLat(110.0, 31.0),  // 河南省的左下角坐标
      new AMap.LngLat(116.0, 37.0)   // 河南省的右上角坐标
    ));

    // 可选：限制缩放级别，防止显示超出区域
    map.setZoom(6);  // 限制缩放级别

    // 可选：限制拖动到河南省之外
    map.setLimitBounds(new AMap.Bounds(
      new AMap.LngLat(110.0, 20.0),  // 设置区域的左下角
      new AMap.LngLat(120.0, 45.0)   // 设置区域的右上角
    ));
  </script>
</body>
</html>