百度或者高德地图的使用

Question

想问一下，这种的地图要如何绘制呢，还需要在地图上回显点的坐标和区域面积

用echarts是实现不了是吧，是需要用到百度地图或者高德地图吗，想问一下具体的实现步骤
现在只是用了echarts实现了了一个简单的一个区的地图

Answer 1

引自免费微信小程序：皆我百晓生

绘制百度或高德地图并实现点坐标回显、区域面积标注等功能，确实需要使用这两家提供的官方API来完成，而不是仅仅依赖ECharts。以下是基于百度地图和高德地图分别实现的详细步骤：

百度地图实现方案：

1. 注册百度地图开发者账号：首先访问百度地图开放平台，注册并创建应用获取API Key。

2. 引入地图JS文件：

   <script src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
   

3. 初始化地图容器：

   var map = new BMap.Map("container"); // 容器ID
   map.centerAndZoom(new BMap.Point(经度, 纬度), 10); // 初始化中心点和缩放级别
   
   // 添加底图（如卫星图）
   var tileLayer = new BMap.TileLayer();
   map.addTileLayer(tileLayer);
   

4. 绘制行政区划： 对于即墨区等行政区域，可以利用百度地图的边界服务加载行政区划，并设置样式。

   // 加载行政区划数据，这里以即墨区为例
   BMap.LocalCity.get(function(result){
       if (result.name == '即墨区') {
           var bdDistrict = new BMap.Boundary();
           bdDistrict.get(result.citycode, function(rs){
               map.clearOverlays(); // 清除之前的覆盖物
               var count = rs.boundaries.length; // 边界点的数量
               for (var i = 0; i < count; i++) {
                   var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, fillColor: "#AAFFAA" }); // 创建多边形覆盖物
                   map.addOverlay(ply); // 将多边形添加到地图中
               }
           });
       }
   });
   

5. 回显点坐标与标注：

   var marker = new BMap.Marker(new BMap.Point(经度, 纬度)); // 创建标注
   map.addOverlay(marker); // 在地图上添加标注
   var label = new BMap.Label('点名', {offset: new BMap.Size(20,-10)});
   marker.setLabel(label); // 设置标注的文字内容
   
   // 计算区域面积（百度地图暂无直接计算区域面积接口，需自行通过经纬度计算）
   // ...
   

6. 其他图层及功能添加：根据需求加载道路、河流等信息，可通过相关服务获取数据后在地图上绘制。

高德地图实现方案：

1. 注册高德地图开发者账号：访问高德地图开放平台，注册并创建应用获取key。

2. 引入地图JS文件：

   <script src="https://webapi.amap.com/maps?v=2.0&key=您的密钥"></script>
   

3. 初始化地图容器：

   var map = new AMap.Map('container', {
       zoom: 10,
       center: [经度, 纬度] // 初始化中心点
   });
   

4. 加载行政区划： 高德地图同样提供了行政区划查询服务，可以通过API获取边界数据并进行绘制。

   AMap.plugin(['AMap.DistrictSearch'], function() {
       var districtSearch = new AMap.DistrictSearch({
           level: 'district' // 查询行政级别为区县
       });
       districtSearch.search('即墨区', function(status, result) {
           if (status === 'complete' && result.districtList.length > 0) {
               var bounds = result.districtList[0].boundaries;
               var polygon = new AMap.Polygon({
                   path: bounds,
                   strokeColor: "#AAFFAA",
                   strokeWeight: 2,
                   fillColor: "#AAFFAA"
               });
               map.add(polygon);
           }
       });
   });
   

5. 回显点坐标与标注：

   var marker = new AMap.Marker({
       position: [经度, 纬度],
       title: '点名'
   });
   marker.setMap(map);
   
   // 计算区域面积（高德地图暂无直接计算区域面积接口，需自行通过经纬度计算）
   // ...
   

对于面积计算，通常需要将获取到的多边形边界坐标转化为平面坐标，然后利用几何算法计算面积。由于这两个地图API并未直接提供计算面积的功能，因此可能需要结合第三方库或者自己编写代码实现。同时，请务必确保你的项目符合地图服务商的相关版权和使用规定。