高德地图添加点标记和标题，添加景点骑行地图和标记

最新推荐文章于 2025-04-07 15:52:16 发布
海贝里的灰尘
最新推荐文章于 2025-04-07 15:52:16 发布
阅读量1.9k
点赞数
分类专栏：高德地图前端
本文链接：https://blog.csdn.net/u013355638/article/details/103642718
版权
前端同时被 2 个专栏收录
5 篇文章
订阅专栏
高德地图
2 篇文章
订阅专栏
<%@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: 3.2rem;
      }
      .btn{
        width: 6rem;
        margin: 0.5rem 0rem 1rem 1.2rem;
      }
      .input-text{
        width: 4rem;
        margin-right:1rem;
      }
      .info{
      	margin-top: 5rem;
      }
      .amap-icon img,
      .amap-marker-content img{
            width: 25px;
            height: 34px;
        }
       .input-card{
       	 display:none;
       	 right:70rem;
       }
       .marker {
		    position: absolute;
		    top: -21px;
		    left: -10px;
		    color: #fff;
		    padding: 4px 10px;
		    box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);
		    white-space: nowrap;
		    font-size: 12px;
		    font-family: "";
		    background-color: #25A5F7;
		    border-radius: 3px;
		}
    </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}" />
					<input type="hidden" id="markers" name="markers" value=""  />
					<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="button" onclick="getContent()"><%=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" id="card" style='width: 18rem;' >
        <div class="input-item">
        <input id="clearMarker" type="text" id="title">
        </div>
        <div class="input-item">
        	<input id="updateMarker" type="button" class="btn" onclick="updateContent()" value="添加标题">
            <input id="clear" 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 markerStr;
	map.on('click',function(e){
         var marker = new AMap.Marker({
             icon:'../admin/image/marker-default.png',
             position:[e.lnglat.lng,e.lnglat.lat],
             offset:new AMap.Pixel(-10,-20)
         });
         map.add([marker]);
         AMap.event.addListener(marker, 'click', function(e) {
         	document.getElementById('card').style.display="flex";//显示
         	markerStr = marker;
         	console.log(markerStr);
         });
    })
    
    document.getElementById('clear').onclick = function(){
        map.remove(markerStr);
    }  
    //获取数据进行提交
    function getContent(){
    	var markerList = map.getAllOverlays("marker");
    	var markers = '';
    	for(var i=0;i<markerList.length;i++){
    		markers += markerList[i].getTitle()+"-"+markerList[i].getPosition().lng+'-'+markerList[i].getPosition().lat+",";
    	}
    	document.getElementById('markers').value= markers;
		document.getElementById('pageForm').submit();
    }
    //加载数据
    var citySignList = new Array();
    var titleList = new Array();
    <c:forEach items="${citySignList}" var="citySign">
    	citySignList.push(new AMap.LngLat(${citySign.lng},${citySign.lat}));
    	titleList.push('${citySign.title}');
    </c:forEach>
    //加载标题，添加点击事件
    drawMachinePosition(map);
    function drawMachinePosition(map){
    		var watchList = [];
    		for(var i = 0;i<citySignList.length;i++){
	         var marker = new AMap.Marker({
	             icon:'../admin/image/marker-default.png',
	             position:[citySignList[i].getLng(),citySignList[i].getLat()],
	             offset:new AMap.Pixel(-10,-20)
	         });
	         marker.setExtData("id"+i);
	         AMap.event.addListener(marker, 'click', function(e) {
	         	document.getElementById('card').style.display="flex";//显示
	         	markerStr = e.target;
	         });
			updateTitle(marker,titleList[i]);
			watchList.push(marker);
	       }
	        map.add(watchList);
		}
		    //更新标题内容
     function updateTitle(mar,title) {
		if(title == 'undefined' || title == ''){
			return;
		}
        if (!mar) {
            return;
        }
        // 自定义点标记内容
        var markerContent = document.createElement("div");
        // 点标记中的图标
        var markerImg = document.createElement("img");
        markerImg.className = "markerlnglat";
        markerImg.src = "../admin/image/marker-red.png";
        markerContent.appendChild(markerImg);
        // 点标记中的文本
        var markerSpan = document.createElement("span");
        markerSpan.className = 'marker';
        markerSpan.innerHTML = title;
        markerContent.appendChild(markerSpan);

		mar.setTitle(title);
        mar.setContent(markerContent); //更新点标记内容
    } 
    
        //更新标题内容
     function updateContent() {

        if (!markerStr) {
            return;
        }
        // 自定义点标记内容
        var markerContent = document.createElement("div");
        // 点标记中的图标
        var markerImg = document.createElement("img");
        markerImg.className = "markerlnglat";
        markerImg.src = "../admin/image/marker-red.png";
        markerContent.appendChild(markerImg);
        // 点标记中的文本
        var markerSpan = document.createElement("span");
        markerSpan.className = 'marker';
        markerSpan.innerHTML = document.getElementById('clearMarker').value;
        markerContent.appendChild(markerSpan);

		markerStr.setTitle(document.getElementById('clearMarker').value);
        markerStr.setContent(markerContent); //更新点标记内容
    }

</script>
</body>