高德地图绘制多边形，骑行路线，步行路线

最新推荐文章于 2024-02-23 10:35:23 发布

海贝里的灰尘

最新推荐文章于 2024-02-23 10:35:23 发布

阅读量1k

点赞数

分类专栏：前端高德地图

本文链接：https://blog.csdn.net/u013355638/article/details/103642628

版权

前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

高德地图

2 篇文章 0 订阅

订阅专栏

<%@page import="com.sun.org.apache.xalan.internal.xsltc.compiler.sym"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" import="java.text.MessageFormat"%>

<%
	ResourceBundle rb = ((ResourceBundle) session
			.getAttribute("languageRD"));
	MessageFormat addSuccessMF = new MessageFormat(
			rb.getString("common_add_success_title"));
	String actionUrl = "areaManage?requestType=80012";
%>
<!--异步加载 高德地图JSAPI -->
<script
	src="//webapi.amap.com/maps?v=1.3&key=key&plugin=AMap.MouseTool"></script>
<!--引入UI组件库异步版本main-async.js（1.0版本） -->
<script src="//webapi.amap.com/ui/1.0/main-async.js"></script>
<head>
<link href="themes/default/style.css" rel="stylesheet" type="text/css"
	media="screen" />
<link href="themes/css/core.css" rel="stylesheet" type="text/css"
	media="screen" />
<link href="themes/css/print.css" rel="stylesheet" type="text/css"
	media="print" />
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" type="text/css">
	<style>
      #gouldMap{
        height: 92%;
        width:100%;
      }
      .input-item{
        height: 2.2rem;
      }
      .btn{
        width: 6rem;
        margin: 0 1rem 0 0rem;
      }
      .input-text{
        width: 4rem;
        margin-right:1rem;
      }
      .info{
      	margin-top: 5rem;
      }
    </style>
</head>
<body>

	<div class="pageHeader">
		<form id="pageForm" onsubmit="return navTabSearch(this);"
			class="pageForm required-validate" action="<%=actionUrl%>"
			method="post">
			<div class="searchBar">
				<table class="searchContent">
					<input type="hidden" name="id" value="${cityRoute.id}" />
					<input type="hidden" id="detailRoute" name="detailRoute" value="${cityRoute.detailRoute}" />
					<tr>
						<td><%=rb.getString("user_area_title")%>：</td>
						<td>
							<select name="cityId">
								<option value="0"><%=rb.getString("common_all_title")%></option>
								<c:forEach items="${cityList}" varStatus="status" var="city">
									<option value="${city.id}"
										<c:if test="${city.id == tagCityId}">selected="selected"</c:if>>
									${city.name}
									</option>
								</c:forEach>
						</select>
						</td>
					</tr>
				</table>
								<div class="subBar">
					<ul>
						<li><div class="buttonActive">
								<div class="buttonContent">
									<button type="submit" onclick="submitForm()"><%=rb.getString("common_commit_title")%></button>
								</div>
							</div></li>
					</ul>
				</div>
			</div>
		</form>
	</div>

	<div id="gouldMap"></div>
	<div class='info'>操作说明：画折线通过鼠标点击来绘制，右键绘制完成</div>
    <div class="input-card" style='width: 18rem;'>
        <div class="input-item">
          <input type="radio" name='func' checked="" value='polyline'><span class="input-text">画折线</span>
        </div>
        <div class="input-item">
            <input id="clear" type="button" class="btn" value="清除" />
          <input id="close" type="button" class="btn" value="关闭绘图" />
        </div>
    </div>
<script type="text/javascript">
    var map = new AMap.Map('gouldMap',{
    	resizeEnable: true,
     	center: [114.12935291602196,22.632984920541144],
        zoom:15
    });
    
 	var triangleCoords = new Array();
	<c:forEach items="${latLngList}" var="mapLL">
		triangleCoords.push(new AMap.LngLat(${mapLL.longitude},${mapLL.latitude}));
	</c:forEach>
	document.getElementById('detailRoute').value = triangleCoords;
    var polyline = new AMap.Polyline({
　　　　map: map,
　　　　path: triangleCoords,
　　　　strokeColor:'red',
　　　　strokeOpacity: 1, //线透明度
　　　　strokeWeight: 3, //线宽
　　　　strokeStyle: "solid" //线样式
　　});

	polyline.setMap(map);
	// 缩放地图到合适的视野级别
    map.setFitView([ polyline ])

    var mouseTool = new AMap.MouseTool(map); 
    //监听draw事件可获取画好的覆盖物
    var overlays = [];
    mouseTool.on('draw',function(e){
        overlays.push(e.obj.getPath());
        document.getElementById('detailRoute').value = overlays;
    }) 
    
    function draw(type){
      switch(type){
        case 'polyline':{
            mouseTool.polyline({
              strokeColor:'red',
		　　　　strokeOpacity: 1, //线透明度
		　　　　strokeWeight: 3, //线宽
		　　　　strokeStyle: "solid" //线样式
            });
            break;
        }
      }
    }
    var radios = document.getElementsByName('func');
    for(var i=0;i<radios.length;i+=1){
        radios[i].onchange = function(e){

          draw(e.target.value)
        }
    }
    draw('polyline')
	//清除
    document.getElementById('clear').onclick = function(){
        map.remove(overlays)
        overlays = [];
        if(polyline){
        	map.remove(polyline);
        }
    }  
    document.getElementById('close').onclick = function(){
        mouseTool.close(true)//关闭，并清除覆盖物
        for(var i=0;i<radios.length;i+=1){
            radios[i].checked = false;
        }
    }

</script>
</body>