脚本错误:对象不支持“getLabel”属性或方法

本文介绍了一个使用百度地图API的地图居中显示功能的实现过程及常见错误处理方法。通过实例演示如何判断图像标注类型并正确调用方法,确保地图能够准确地根据用户名定位。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

转载http://blog.youkuaiyun.com/to_baidu/article/details/54897198

最近在使用百度地图API编写一个具有地图功能的MFC程序,在编写htm时遇到一个脚本错误,并进行了解决!


代码要实现的功能

step1:点击右边树状控件的某一项后,会根据该项的内容(即用户名)查找地图上是否标注了该用户;

step2:若已标注该用户,则将地图的中心位置平移到该用户上;若未标注该用户,则弹出提示信息“暂无***的位置信息!”。



问题

错误代码如下:

[cpp]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. //树型控件双击某项时,执行的函数,使得对应的用户居中显示  
  2. function showAtCenter(name) {  
  3.     var allOverlay = map.getOverlays();  
  4.     for (var i = 0; i < allOverlay.length; i++) {  
  5.         if (allOverlay[i].getLabel().content == name) {  
  6.             map.panTo(allOverlay[i].getPosition());  
  7.             return false;  
  8.         }  
  9.     }  
  10.     alert("暂无   '" + name + "'   的位置信息!");  
  11. }  


执行后的错误提示:


错误分析

注意在使用allOverlay[i]时要进行是否是Marker的判断,因为getOverlays()后会得到类型不同的对象,只有Marker图像标注类才有getLabel()方法,否则会出现错误:对象不支持“getLabel”属性或方法。

解决方案

正确代码如下:

[cpp]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. //树型控件双击某项时,执行的函数,使得对应的用户居中显示  
  2. function showAtCenter(name) {  
  3.     var allOverlay = map.getOverlays();  
  4.     for (var i = 0; i < allOverlay.length - 1; i++) {  
  5.         //注意:在使用allOverlay[i]要进行是否是Marker的判断,因为getOverlays()后会得到类型不同的对象  
  6.         //只有Marker图像标注类才有getLabel()方法,否则会出现错误:对象不支持“getLabel”属性或方法  
  7.         if (allOverlay[i] instanceof BMap.Marker) {  
  8.             if (allOverlay[i].getLabel().content == name) {  
  9.                 map.panTo(allOverlay[i].getPosition());  
  10.                 return false;  
  11.             }  
  12.         }  
  13.     }  
  14.     alert("暂无   '" + name + "'   的位置信息!");  
  15. }  


正确执行效果

双击右边树形控件的Androiduser项后,地图平移至以Androiduser标注为中心!



<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title>休暇申請</title> <th:block th:replace="css.html"/> <style> h5{display:inline-block;}.modal-body,.modal-body p{font-size:14px;}#tipId{margin-top:-12px; margin-left:16px;}.color-input-disabled{color:#2f4154;} </style> </head> <body> <th:block th:replace="menu.html"/> <div class="header-6"> <div class="header-blur"></div> <div id="particles-js" class="header-particles"></div> <div class="header-inner"> <h2 class="header-title">休暇申請</h2> </div> </div> <div class="container content" style="transition: height 1s ease"> <div class="content-wrapper"> <div class="row margin-bottom-30"> <div class="col-auto"> <h5>休暇申請</h5> <input id="tipId" class="btn btn-info btn-xs" type="button" value="説明"> </div> </div> <!-- form --> <form role="form" th:action="@{/leave/submit}" th:object="${leaveApplyForm}" method="post" id="applyForm"> <div class="row"> <div class="col-md-2 col-sm-4 form-group"> <label class="col-form-label label-gray">開始日付</label> <font class="text-danger">※</font> </div> <div class="col-md-4 col-sm-4 form-group"> <input type="text" id="restDate" th:field="*{startDate}" autocomplete="off" class="form-control datetimepicker" placeholder="年/月/日"> </div> </div> <div class="row"> <div class="col-md-2 col-sm-4 form-group"> <label class="col-form-label label-gray">休暇時間</label> <font class="text-danger">※</font> </div> <div class="col-md-2 col-sm-4 form-group after-day"> <input type="text" id="restDays" th:field="*{restDays}" autocomplete="off" class="form-control textbox" placeholder="1日単位"/> </div> <div class="col-md-2 col-sm-4 form-group after-hour"> <input type="text" id="restHours" th:field="*{restHours}" autocomplete="off" class="form-control textbox" placeholder="1時間単位"/> </div> </div> <div class="row"> <div class="col-md-2 col-sm-4 form-group"> <label class="col-form-label label-gray">有給使用時間</label> </div> <div class="col-md-2 col-sm-4 form-group after-day"> <input type="text" id="paidDays" th:field="*{paidDays}" autocomplete="off" class="form-control textbox" placeholder="1日単位"/> </div> <div class="col-md-2 col-sm-4 form-group after-hour"> <input type="text" id="paidHours" th:field="*{paidHours}" autocomplete="off" class="form-control textbox" placeholder="1時間単位"/> </div> </div> <div class="row"> <div class="col-md-2 form-group"> <label class="col-form-label label-gray">特別休暇使用時間</label> </div> <div class="col-md-4 form-group"> <div id="specialRest" class="form-control custom-selector"></div> <select id="specialRest" th:field="*{specialRest}"> <option value=""> </option> <option th:each="item : ${T(jp.co.yangtze.common.enums.SpecialRestReason).values()}" th:value="${item.getCode()}" th:selected="${item.getCode()} == *{specialRest}" th:text="${item.getLabel()}"></option> </select> </div> <div class="col-md-2 col-sm-3 form-group after-day"> <input type="text" id="specialDays" th:field="*{specialDays}" autocomplete="off" disabled class="form-control textbox" placeholder="1日単位"/> </div> <div class="col-md-2 col-sm-3 form-group after-hour"> <input type="text" id="specialHours" th:field="*{specialHours}" autocomplete="off" disabled class="form-control textbox" placeholder="1時間単位"/> </div> </div> <div class="row"> <div class="col-md-2 form-group"> <label class="col-form-label label-gray">休暇理由</label> <font class="text-danger">※</font> </div> <div class="col-md-4 form-group"> <div id="reasonCode" class="form-control custom-selector"></div> <select id="reasonCode" th:field="*{reasonCode}"> <option value=""> </option> <option th:each="item : ${T(jp.co.yangtze.common.enums.RestReason).values()}" th:value="${item.getCode()}" th:selected="${item.getCode()} == *{reasonCode}" th:text="${item.getLabel()}"></option> </select> </div> </div> <div class="row"> <div class="col-md-2 form-group"> <label class="col-form-label label-gray">備考</label> </div> <div class="col-md-10 form-group"> <input type="text" id="remark" th:field="*{remark}" class="form-control textbox" autocomplete="off" placeholder="備考"></input> </div> </div> </form> <div class="row margin-top-30"> <div class="col-md-3 offset-md-2 form-group"> <button id="apply" class="btn btn-block btn-info" type="button">申請</button> </div> <div class="col-md-3 offset-md-2 form-group"> <button id="back" class="btn btn-block btn-info" type="button">戻る</button> </div> </div> </div> </div> <div class="modal fade" id="restRuleModal" tabInx="-1" aria-labelledby="mydelby" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h6 class="modal-title" id="myModalLabel">休暇申請説明</h6> </div> <div class="modal-body"> <p>数字は半角で入力してください;</p> <p>休暇時間=有給使用時間+特別休暇使用時間;</p> <p>特別休暇使用の説明:</p> <p>1親等→父母、配偶者、子女;</p> <p>2親等→祖父母、配偶者の父母、及び兄弟姉妹;</p> </div> <div class="modal-footer"> <button class="btn btn-primary" data-dismiss="modal">確認</button> </div> </div> </div> </div> <th:block th:replace="footer.html" /> <th:block th:replace="js.html" /> <th:block th:replace="chose_approver.html"/> <script th:inline="javascript"> var overtime = /*[[${overtime}]]*/ 0; console.log("Remaining hours:", overtime); </script> <script> $(document).ready(function() { //特別休暇制御 if($("select#specialRest").val().trim().length !== 0) { $("#specialDays").removeAttr("disabled"); $("#specialHours").removeAttr("disabled"); } else { $("#specialDays").attr("disabled","true"); $("#specialHours").attr("disabled","true"); } $("#tipId").click(function() { $("#restRuleModal").modal(); }); // 申請 $("#apply").click(function(){ $("#choseApproverModal").modal(); approvePermission = "leave:manage"; }); // 戻る $("#back").click(function() { $("#applyForm").attr('action', '/leave/back'); $("#applyForm").attr('method', 'get'); $("#applyForm").submit(); }); $("select#specialRest").change(function() { if(this.value.trim().length !== 0) { $("#specialDays").removeAttr("disabled"); $("#specialHours").removeAttr("disabled"); } else { $("#specialDays").attr("disabled","true"); $("#specialHours").attr("disabled","true"); $("#specialDays").val(""); $("#specialHours").val(""); } }); }); //20250521 mod by soki start /*function onApproverChosed(approverId){ $("#applyForm").attr('action', '/leave/submit'); $("#applyForm").attr('method', 'post'); $("#applyForm").append($('<input />', { type: 'hidden', name: 'approverId', value: approverId, })); $(window).rippleLoading(); $("#applyForm").submit(); }*/ //var overMessage = ' /*[[${overMessage}]]*/ '; function onApproverChosed(approverId) { console.log(overtime); // 新增条件判断(修改点1) if (overtime < 0) { // 弹出确认对话框(修改点2) $(window).confirmDialog({ info: '有給残時間はマイナスとなります、申請後有給残時間:', confirmText: "はい", cancleText: "キャンセル", confirmCallback: function() { // 确认后执行原逻辑(修改点3) doFormSubmit(approverId); }, cancelCallback: function() { // 取消停止(修改点4) $(window).rippleLoading("hide"); // 可选的加载动画关闭 } }); } else { // 无消息直接提交(修改点5) doFormSubmit(approverId); } } // 新增公共提交方法(修改点6) function doFormSubmit(approverId) { // 先清空可能存在的旧字段(修改点7) $("#applyForm input[name='approverId']").remove(); $("#applyForm") .attr('action', '/leave/submit') .attr('method', 'post') .append($('<input />', { type: 'hidden', name: 'approverId', value: approverId })); $(window).rippleLoading(); // 显示加载动画 $("#applyForm").submit(); } //20250521 mod by soki end </script> </body> </html>这是我前端代码,帮我分析一下
05-22
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值