根据经纬度数组绘制地区范围

根据获取的经纬度组成二维数组并使用overlay绘制区块图

将经纬度数据经过拼接组成二维数组的形式:

拼接字符串:

将一列数据拼接并使用逗号分隔:

公式:=D1:D68 点击F9 生成

手动删除头尾多余字符串,ctrl+H替换 "," 为 ,

代码:

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E06eb9d756d0eafc722effb355657b4c"></script>
	<title>区域展示</title>
<script src="http://c.cnzz.com/core.php"></script></head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">

	
	// 百度地图API功能
	var map = new BMap.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMap.Point(118.803572,32.066121), 15);  // 初始化地图,设置中心点坐标和地图级别
	map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
	map.setCurrentCity("南京");          // 设置地图显示的城市 此项是必须设置的
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
   

   

	
    var _TheArray = [[118.793425,32.040599],[118.793657,32.042257],[118.79397,32.044788],[118.794106,32.045703],[118.795121,32.051495],[118.795498,32.054086],[118.794785,32.05424],[118.794091,32.054978],[118.793609,32.055507],[118.793609,32.055507],[118.793539,32.056249],[118.793545,32.057455],[118.79355,32.058501],[118.793725,32.060881],[118.793627,32.062018],[118.793468,32.063023],[118.793439,32.064643],[118.793439,32.064643],[118.793446,32.065729],[118.793285,32.066237],[118.793301,32.06777],[118.793008,32.069068],[118.792519,32.07109],[118.792463,32.071158],[118.790412,32.071002],[118.790475,32.075661],[118.790529,32.075669],[118.788423,32.075515],[118.784155,32.07529],[118.779441,32.07462],[118.779419,32.074451],[118.778518,32.073691],[118.775614,32.071318],[118.775614,32.071318],[118.775614,32.071318],[118.775614,32.071318],[118.775614,32.071318],[118.775614,32.071318],[118.779374,32.070302],[118.781976,32.070475],[118.783634,32.070624],[118.78357,32.070605],[118.78357,32.070605],[118.781428,32.068593],[118.781043,32.067963],[118.781125,32.06662],[118.781166,32.065189],[118.781111,32.065235],[118.780806,32.063765],[118.78078,32.063004],[118.780471,32.061686],[118.780424,32.060799],[118.7811,32.058792],[118.783699,32.052875],[118.783016,32.049863],[118.782521,32.048316],[118.782752,32.048139],[118.781795,32.0457],[118.781455,32.044001],[118.782159,32.043738],[118.783104,32.043415],[118.78473,32.042774],[118.787236,32.041789],[118.787908,32.041509],[118.788904,32.04132],[118.789006,32.04137],[118.789658,32.041283],[118.790465,32.041158],[118.790577,32.04114],[118.791326,32.040995],[118.793425,32.040599]
];
        
     for(var i=0;i< _TheArray.length;i++){
	    drawRedLine(_TheArray[i][0],_TheArray[i][1],_TheArray[i+1][0],_TheArray[i+1][1]);
        }
      

   
   function drawRedLine(lon,lat,endLon,endLat){
	   var polyline1 = new BMap.Polyline([
		                                  new BMap.Point(lon,lat),//起始点的经纬度
		                                  new BMap.Point(endLon,endLat)//终止点的经纬度
		                                  ], {strokeColor:"red",//设置颜色 
		                                  strokeWeight:5, //宽度
		                                  strokeOpacity:1});//透明度
	   map.addOverlay(polyline1);
   }
 
 
</script>

效果图::

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 要根据后端返回的经纬度数组回放路径轨迹,您需要使用地图API将这些坐标点绘制在地图上,以显示路径的路线。 以下是一个通用的基本步骤,可以帮助您实现这个功能: 1. 选择一个合适的地图API,例如Google Maps、Mapbox、Baidu Maps等,并获取API密钥。 2. 根据您选择的API,按照文档指示,初始化地图对象。 3. 根据后端返回的经纬度数组,使用API提供的功能将这些坐标点添加到地图上。 4. 如果需要,可以设置路径的样式,例如颜色、宽度等。 5. 可选:将地图视角调整为适当的缩放级别,以便用户能够看到整个路径。 6. 将地图对象嵌入到您的页面中,以便用户可以查看路径轨迹。 下面是一个使用Google Maps API V3的示例代码: ```javascript function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 14, center: {lat: 37.7749, lng: -122.4194} // 设定地图中心 }); var path = []; // 存储路径点的数组 var coordinates = [ // 后端返回的经纬度数组 {lat: 37.7749, lng: -122.4194}, {lat: 37.7742, lng: -122.4186}, {lat: 37.7735, lng: -122.4179}, {lat: 37.7730, lng: -122.4168}, {lat: 37.7725, lng: -122.4158}, {lat: 37.7720, lng: -122.4151}, ]; for (var i = 0; i < coordinates.length; i++) { path.push(new google.maps.LatLng(coordinates[i].lat, coordinates[i].lng)); } var route = new google.maps.Polyline({ path: path, geodesic: true, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 2 }); route.setMap(map); } ``` 这段代码将在名为 "map" 的HTML元素中创建一个新的Google地图,并在地图上绘制一个红色的折线,表示一条路径轨迹。您可以将其修改为符合您自己的需求。 ### 回答2: 根据后端返回的经纬度数组回放路径轨迹可以使用地图和定位技术来实现。 首先,我们需要使用地图API来加载地图,常用的地图API包括百度地图、高德地图等。通过API提供的接口,我们可以将地图显示在页面上,并根据返回的经纬度数据来标记路径点。 其次,我们需要使用定位技术来获取用户的当前位置并在地图上标记出来。通过GPS或其他定位技术,我们可以获得用户的当前经纬度坐标,并将其显示在地图上。 然后,我们需要使用返回的经纬度数组来回放路径轨迹。可以通过循环遍历数组中的每一个经纬度坐标点,并通过地图API提供的接口将其标记在地图上。在标记每一个点的同时,我们可以设置一定的延时,以便观察路径的移动。 最后,为了增加用户体验,我们还可以添加一些动画效果来展示路径的回放。可以通过设置动态移动的标记点、改变路径线的颜色等方式,营造出轨迹回放的效果。 根据以上步骤,我们可以实现根据后端返回的经纬度数组回放路径轨迹的功能。用户可以在地图上观察到路径点的标记,并通过动态效果感受到路径的回放过程。这样的功能可以应用于很多场景,比如旅游导航、运动轨迹回放等。 ### 回答3: 根据后端返回的经纬度数组回放路径轨迹,我们可以使用地图相关的API来实现。首先,我们需要获取地图的实例,然后根据传入的经纬度数组绘制路径轨迹。 我们可以选择使用百度地图、谷歌地图、高德地图等开放平台提供的API。以百度地图为例,具体步骤如下: 1. 首先,我们需要申请百度地图的API密钥。在申请过程中,需要提供相关的开发者信息,包括应用名称、应用描述等。 2. 在前端页面中,引入百度地图的JS文件,并创建一个地图容器,用来展示地图。可以通过指定的DOM元素的id来获取该容器。 3. 在后端返回的经纬度数组中,遍历每个经纬度点,并将其添加到百度地图的经纬度对象中。 4. 创建一个百度地图的点集合(polyline),将上述经纬度对象添加到点集合中。 5. 将点集合添加到地图上,并设置点集合的相关属性,如颜色、线宽等。 6. 最后,调用百度地图的绘制方法,将路径轨迹展示在地图上。 通过上述步骤,我们可以实现根据后端返回的经纬度数组回放路径轨迹。用户可以在地图上看到路径的具体轨迹,并进行放大、缩小、拖拽等操作。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值