解决在EasyUI中使用百度地图出现不居中和坐标图标显示异常的问题(红色代码部分)

问题:

1.加载指定经纬度的坐标点怎么都不居中显示,总是显示在左上角,需要在地图加载完后拖动才看到指定的坐标点;

2.显示的坐标点图片没有正常显示,后面使用了自定义坐标图片(如图):

 
解决后:
 
参考:
1.百度地图API类:http://developer.baidu.com/map/reference/index.php?title=Class:%E6%80%BB%E7%B1%BB/%E6%A0%B8%E5%BF%83%E7%B1%BB
2.自定义图标这里有:http://blog.csdn.net/chenmoquan/article/details/13631673
3.坐标总是显示在左上角:http://tieba.baidu.com/p/1712879513
4.解决代码参看myIcon=和map.panBy(320, 225)处,也就是标红的2个部分;

页面:

/* 百度地图样式 */ #allmap { width: 650px; height: 450px; }

<div id="allmap"></div>

js

/**************************************************** * 加载百度地图 * http://developer.baidu.com/ ****************************************************/

var map, myIcon; // 地图全局变量,自定义图标名称

 // 加载百度地图:商家名称,lng经度,lat纬度,商家详细地址,商家联系电话 function mapBind(mName, lng, lat, address, tel){ // 创建百度地图Map实例 map = new BMap.Map("allmap"); // 逆地址解析 var gc = new BMap.Geocoder(); /** * 百度地图API接口类:http://developer.baidu.com/map/reference/index.php?title=Class:总类/核心类 * 自定义坐标点指示图标:http://blog.csdn.net/chenmoquan/article/details/13631673 */ myIcon = new BMap.Icon(objUrl + "/resources/images/detail/myicon.png", new BMap.Size(20, 30), { imageSize: new BMap.Size(20, 30), // 图标所用的图片的大小,此功能的作用等同于CSS中的background-size属性 anchor: new BMap.Size(10, 30), // 图标的定位点相对于图标左上角的偏移值 infoWindowAnchor: new BMap.Size(10, 0) // 信息窗口开启位置相对于图标左上角的偏移值 }); // 初始化地图,设置中心点坐标和地图级别 (new BMap.Point(106.620, 26.648), 13); //map.centerAndZoom(new BMap.Point(data.C_LONGITUDE, data.C_LATITUDE), 18); map.enableScrollWheelZoom(true); // 单击获取点击的经纬度 map.addEventListener('click',function(e){ var pt = e.point; // 将点击获取的经纬度赋值到控件 $('#txtLng').numberbox('setValue', pt.lng); $('#txtLat').numberbox('setValue', pt.lat); map.clearOverlays(); map.centerAndZoom(pt); map.addOverlay(new BMap.Marker(pt, {icon:myIcon})); //添加标注和自定义图标 // 逆地址解析:将点击获取的经纬度解析为详细地址 gc.getLocation(pt, function(rs){ /* var ac = rs.addressComponents; $('#txtAddress').textbox('setValue', ac.city + ac.district + ac.street + ac.streetNumber); */ /* alert(ac.province + ", " + ac.city + ", " + ac.district + ", " + ac.street + ", " + ac.streetNumber); */ }); }); // 添加地图类型控件 map.addControl(new BMap.MapTypeControl()); // 左上角,添加比例尺 map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT})); // 左上角,添加默认缩放平移控件 map.addControl(new BMap.NavigationControl()); // 右上角,仅包含平移和缩放按钮 /* map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL})); */ // 设置地图显示的城市 此项是必须设置的 //map.setCurrentCity("贵阳市"); var point; //存放标注点经纬信息的数组 var marker; //存放标注点对象的数组 var info; //存放提示信息窗口对象的数组 if(lng != '' && lat != ''){ // 坐标点 point = new window.BMap.Point(lng, lat); // 按照地图点坐标生成标记 marker = new window.BMap.Marker(point, {icon:myIcon}); // 跳动的动画 marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 创建信息窗口对象 info = new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;’>名称:" + mName + "</br>地址:" + (address == undefined ? "" : address) + "</br> 电话:" + (tel == undefined ? "" : tel ) + "</br></p>"); // 设置坐标的文字标签 var label = new window.BMap.Label(mName, { offset: new window.BMap.Size(20, -10) }); marker.setLabel(label); // 鼠标移到坐标点显示信息框 marker.addEventListener("mouseover", function () { this.openInfoWindow(info); }); // 清除地图上的所有覆盖物 map.clearOverlays(); map.centerAndZoom(point, 18); map.addOverlay(marker); //map.panTo(point); map.setCenter(point); } // 坐标不居中:http://tieba.baidu.com/p/1049624601 // http://tieba.baidu.com/p/1712879513 var newPt = new BMap.Point(lng, lat); map.centerAndZoom(newPt, 18); //map.setCenter(newPt);或者 map.setCenter(new BMap.Point(lng, lat),16); // 中心点偏移多少像素(width,height)为地图div宽高的1/2;解决不居中问题 map.panBy(320, 225); // 百度地图关键字提示输入并定位功能 mapDownClick(); } // 百度地图关键字提示输入并定位功能:http://developer.baidu.com/map/jsdemo.htm#a6_2 function mapDownClick(){ // 建立一个自动完成的对象 var ac = new BMap.Autocomplete( { "input" : "suggestId", "location" : map }); // 鼠标放在下拉列表上的事件 ac.addEventListener("onhighlight", function(e) { var str = ""; var _value = e.fromitem.value; var value = ""; if (e.fromitem.index > -1) { value = _value.province + _value.city + _value.district + _value.street + _value.business; } str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value; value = ""; if (e.toitem.index > -1) { _value = e.toitem.value; value = _value.province + _value.city + _value.district + _value.street + _value.business; } str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value; getObj("searchResultPanel").innerHTML = str; }); // 鼠标点击下拉列表后的事件 var myValue; ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件 var _value = e.item.value; myValue = _value.province + _value.city + _value.district + _value.street + _value.business; getObj("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue; // 设置搜到的地点图标 setPlace(myValue); }); } // 百度地图API功能 function getObj(id) { return document.getElementById(id); } // 设置搜到的地点图标 function setPlace(myValue) { map.clearOverlays(); // 清除地图上所有覆盖物 function myFun() { var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果 map.centerAndZoom(pp, 18); map.addOverlay(new BMap.Marker(pp, {icon:myIcon})); //添加标注和自定义图标 } var local = new BMap.LocalSearch(map, { //智能搜索 onSearchComplete : myFun }); local.search(myValue); }


  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在EasyUI项目使用FileBox控件实现文件上传处理,可以按照以下步骤进行操作: 1. 在页面引入EasyUI的相关文件,包括jQuery、EasyUI的CSS和JavaScript文件。 2. 在页面添加一个FileBox控件,并设置相应的属性,如name、buttonText、onChange等。 3. 在JavaScript监听FileBox的onChange事件,并使用FormData对象将文件数据封装成一个表单数据对象。 4. 使用jQuery的ajax方法将表单数据发送到服务器端进行处理。 5. 在服务器端接收表单数据,并将文件保存到指定的目录。 以下是一个简单的示例代码: HTML代码: ``` <div class="easyui-panel"> <form id="uploadForm"> <input class="easyui-filebox" name="file" buttonText="选择文件" onChange="uploadFile()" /> </form> </div> ``` JavaScript代码: ``` function uploadFile() { var formData = new FormData($('#uploadForm')[0]); $.ajax({ url: 'upload.php', type: 'POST', data: formData, processData: false, contentType: false, success: function(data) { alert(data); } }); } ``` PHP代码: ``` <?php if ($_FILES['file']['error'] == UPLOAD_ERR_OK) { $tempName = $_FILES['file']['tmp_name']; $fileName = $_FILES['file']['name']; move_uploaded_file($tempName, 'uploads/' . $fileName); echo '文件上传成功!'; } else { echo '文件上传失败!'; } ?> ``` 在这个示例,我们使用EasyUI的FileBox控件来实现文件上传,并使用了jQuery的ajax方法发送表单数据到服务器端进行处理。在服务器端,我们使用PHP来接收表单数据,并将文件保存到指定的目录

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值