1. 程式人生 > >解決在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 =newBMap.Map("allmap"); // 逆地址解析 var gc =newBMap.Geocoder(); /** * 百度地圖API介面類:http://developer.baidu.com/map/reference/index.php?title=Class:總類/核心類 * 自定義座標點指示圖示:http://blog.csdn.net/chenmoquan/article/details/13631673 */ myIcon =newBMap.Icon
(objUrl +"/resources/images/detail/myicon.png", newBMap.Size(20,30), { imageSize:newBMap.Size(20,30),// 圖示所用的圖片的大小,此功能的作用等同於CSS中的background-size屬性 anchor:newBMap.Size(10,30),// 圖示的定位點相對於圖示左上角的偏移值 infoWindowAnchor:newBMap.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(newBMap.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(newBMap.MapTypeControl()); // 左上角,新增比例尺 map.addControl(newBMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT})); // 左上角,新增預設縮放平移控制元件 map.addControl(newBMap.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 =newBMap.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 =newBMap.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(newBMap.Marker(pp,{icon:myIcon}));//新增標註和自定義圖示 } varlocal=newBMap.LocalSearch(map,{//智慧搜尋 onSearchComplete : myFun }); local.search(myValue); }


相關推薦

no