高德地圖-刪除多個指定點標記-js教程-PHP中文網

首頁

web前端

js教程

高德地圖-刪除多個指定點標記

黄舟

Feb 16, 2017 pm 01:51 PM

1、問題背景

高德地圖上標記多個標記，點選刪除按鈕，可以刪除指定的幾個點標記

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
	    <title>高德地图-删除多个指定点标记</title>
	    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
	    <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
	    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
	</head>
	<body>
		<p id="container"></p>
		<p class="button-group">
		    <input type="button" class="button" value="删除" id="delMarker"/>
		</p>
		<script>
		    var map = new AMap.Map("container", {
		        resizeEnable: true,
		        center: [114.20495,30.407079],
		        zoom: 13
		    });
		    
		    AMap.event.addDomListener(document.getElementById(&#39;delMarker&#39;), &#39;click&#39;, function() {
		        markers[1].setMap(null);
		        markers[3].setMap(null);
		        markers[5].setMap(null);
		        markers[7].setMap(null);
		        markers[9].setMap(null);
		    }, false);
		    var markers = [], 
		    	positions = [
		            [114.195423,30.405821], 
		            [114.203662,30.404636], 
		            [114.220828,30.404784], 
		            [114.222202,30.393976], 
		            [114.201431,30.392051],
		            [114.193448,30.413149],
		            [114.220657,30.414777],
		            [114.205379,30.414629],
		            [114.202976,30.398492],
		            [114.208812,30.400121]
		        ];
		    for (var i = 0, marker; i < positions.length; i++) 
		    {
		        marker = new AMap.Marker({
		            map: map,
		            icon: &#39;http://webapi.amap.com/theme/v1.3/markers/n/mark_b&#39;+(i+1)+&#39;.png&#39;,
		            position: positions[i]
		        });
		        markers.push(marker);
		    }
		</script>
	</body>
</html>

3、實現結果

（1）初始化時

（2）點擊刪除按鈕

高德地圖-刪除多個指定點標記

以上就是高德地圖-刪除多個指定點標記的內容，更多相關內容請關注PHP中文網（www.php.cn）！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

高德地图怎么悄悄添加家人Sep 27, 2023 pm 04:32 PM

高德地图添加家人的方法：1、下载安装高德地图；2、在主界面上方的搜索栏中，输入家人的手机号码或姓名；3、并点击进入他们的个人信息页面；4、在个人信息页面的右上角，有一个“添加到我的位置”按钮，并点击；5、点击确认后，该家人将被添加到用户的位置列表中即可。

高德地图怎么知道对向来车Nov 08, 2023 am 11:43 AM

高德地图并不直接知道对向来车的情况。关于对向来车的情况，高德地图无法直接获取到实时信息。要了解对向来车的情况，驾驶员需要依靠自己的观察和判断，遵守交通规则，保持安全行车距离，并根据需要使用后视镜等设备来观察对向来车的情况。记住，安全驾驶是每个驾驶员的责任，要时刻保持警觉并做好安全防护。

Java开发者必读：高德地图行政区划查询的行政区边界数据获取方法Jul 31, 2023 pm 09:05 PM

Java开发者必读：高德地图行政区划查询的行政区边界数据获取方法在地理信息系统（GIS）开发中，行政区划数据的获取是一个常见的需求。在使用高德地图作为地理信息数据源时，我们可以通过高德地图的行政区划查询接口获取具体行政区的边界数据。本文将为Java开发者介绍如何使用高德地图的行政区划查询接口来获取行政区边界的数据。在开始之前，我们需要先申请高德开发者账号并获

高德地图发布全新驾车巡航模式Aug 12, 2023 am 08:29 AM

高德地图于8月5日宣布推出全新功能，名为"驾车巡航模式"，通过利用北斗系统定位技术，旨在为用户提供更全面的交通路况信息，以提升驾车出行的便捷性和安全性用户在进入驾车巡航模式后，可以通过高德地图获得超过3公里的远视距，全面了解车辆周围的动态情况。该功能的一大亮点是高德地图基于北斗系统定位技术，可以显示沿途前方各个方向的红绿灯计时状况。用户只需简单扫视屏幕，就能知道前方路口是放行还是停滞，并了解距离下次变换还有多少秒，以便及时做出决策驾车巡航模式不仅仅是红绿灯，还提供了车道限速、

高德地图推出全新功能：里程桩数据服务升级，新增里程桩号查询和经纬度匹配桩号功能Sep 16, 2023 pm 05:29 PM

本站9月16日消息，高德地图官方宣布“里程桩数据服务”新功能上线，基于高德精确地图数据和里程桩采集定位技术，覆盖全国超过95%的高速里程，桩号动态转化能力精确到米级。标精产品平均精度10米，高精产品达到10厘米。本站从官方获悉，该服务为高速公路用户提供了多种功能，包括里程桩号查询、经纬度匹配桩号、桩号转经纬度、桩号对应道路动静态信息查询等。坐标转桩号：用于事故和道路救援等场景中使用，快速定位救援用户位置，实现上图、规划、派车一体化。桩号转坐标：用于信息发布场景、业主内部的施工、事故、封闭等桩号文

高德地图升级智能信号灯服务：真实世界红绿灯倒计时读秒，实时计算绿波车速Nov 30, 2023 pm 09:33 PM

本站11月30日消息，高德地图今日宣布，已与全国多地官方机构围绕城市智能信号灯服务达成合作，推动官方红绿灯数据融入地图导航产品。据介绍，本次西安、兰州、泉州、济宁、北京亦庄等地公安交警机构与高德地图的合作，围绕交通信息“共享、共治、共用”的深度融合理念，全面推动信号灯态信息融入高德地图App中，并结合高德积累的北斗定位、人工智能、智慧交通等前沿技术构建核心算力，为用户提供更精准高效的智能红绿灯服务。例来说，用户在十字路口等红灯时，面对没有倒计时的信号灯；或者所在车道上，排在前面的是一辆“高大上”

高德地图弯道对向来车提醒的原理是什么Sep 22, 2023 pm 04:00 PM

高德地图弯道对向来车提醒的原理是通过实时获取车辆位置、速度、方向等信息，分析道路情况和车辆行驶轨迹，预测可能出现的对向来车情况，并向驾驶员发出预警，从而提高道路交通安全性和驾驶员行车安全性。弯道对向来车提醒功能的实现主要包括：1、卫星定位；2、数据采集；3、智能算法；4、预警提醒；5、数据反馈。

高德地图API文档解读：Java代码实现公交车在线运行状态查询Jul 29, 2023 pm 10:45 PM

高德地图API文档解读：Java代码实现公交车在线运行状态查询导语：随着城市的发展，公共交通的重要性越来越凸显出来。人们对公交车的运行状态有着强烈的需求，例如实时到站时间、拥挤程度等信息。高德地图提供了强大的API以满足这方面的需求。本文将解读高德地图API文档，使用Java代码实现公交车在线运行状态查询，并提供代码示例。API概述高德地图API提供了丰富的

See all articles