首页 > 代码库 > 解决在EasyUI中使用百度地图出现不居中和坐标图标显示异常的问题(红色代码部分)
解决在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 = http://www.mamicode.com/" + 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 = http://www.mamicode.com/" + 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 = http://www.mamicode.com/" + 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); }
解决在EasyUI中使用百度地图出现不居中和坐标图标显示异常的问题(红色代码部分)