問題：

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); }