当前位置：首页 > wzjs >正文

淘宝官网首页版本湖南seo推广软件

wzjs 2025/9/10 6:29:00

淘宝官网首页版本,湖南seo推广软件,想学编程做网站,网站开发适合女生不直接贴代码，自行替换高德的申请的key值效果图如下，点击右下角区域开始使用MouseTool工具，再次点击取消使用工具弹窗显示选中的点标记的附加信息,给选中的点标记设置颜色代码如下 <!doctype html> <html lang"en"&…

直接贴代码，自行替换高德的申请的key值

效果图如下，点击右下角区域开始使用MouseTool工具，再次点击取消使用工具
在这里插入图片描述

弹窗显示选中的点标记的附加信息,给选中的点标记设置颜色

代码如下

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="chrome=1"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" type="text/css"><style>html,body,#container {height: 100%}#Div_Choose {user-select: none;font-size: 16px;color: #999;}#Div_Choose.active {color: red;}</style><title>鼠标工具绘制</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script></head><body><div id='container'></div><div class="input-card" style='width: 24rem;'><div id="Div_Choose" isChoose="false" style="padding: 8px 10px;cursor: pointer;">点击开始框选</div></div><!-- 自行替换高德的key自行替换高德的key自行替换高德的key--><script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.MouseTool"></script><script type="text/javascript">var map = new AMap.Map('container', {zoom: 14});// 示例点标记经纬度var arr_lnglat = [[116.397389, 39.915161],[116.394728, 39.912067],[116.38151, 39.907524],[116.394213, 39.896725],[116.406744, 39.904693],[116.414211, 39.894882],[116.373356, 39.922204],];// 点标记集合var List_Marker = [];map.on('complete', () => {// 循环添加测试点标记for (var i = 0; i < arr_lnglat.length; i++) {let marker = new AMap.Marker({icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",position: arr_lnglat[i],anchor: 'bottom-center',label: { content: 'Code_' + i, direction: 'bottom' },extData: {stationCode: 'Code_' + i}});marker.setMap(map);List_Marker.push(marker);}});var 选中的站点编码 = [];var mouseTool = new AMap.MouseTool(map);mouseTool.on('draw', function(e) {// 清除上次选择的点标记选中的站点编码 = [];for (var i = 0; i < List_Marker.length; i++) {List_Marker[i].setIcon('//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png');}// 本次绘制的方框var rectangle = e.obj;// 判断选中了哪些点标记for (var i = 0; i < List_Marker.length; i++) {var tempMark = List_Marker[i];var Pos = tempMark.getPosition();var lnglat = [Pos.lng, Pos.lat];if (rectangle.contains(lnglat)) {tempMark.setIcon('//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png');选中的站点编码.push(tempMark.getExtData().stationCode);}}alert(选中的站点编码);map.remove(e.obj)})// 框选按钮$("#Div_Choose").click(function(e) {var isChoose = $(this).hasClass('active');if (!isChoose) {mouseTool.rectangle({fillColor: '#00b0ff',strokeColor: '#80d8ff'//同Polygon的Option设置});$(this).addClass('active');$(this).html('点击结束框选')} else {mouseTool.close(true) //关闭，并清除覆盖物$(this).removeClass('active');$(this).html('点击开始框选')for (var i = 0; i < List_Marker.length; i++) {List_Marker[i].setIcon('//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png');}}})</script></body>
</html>