本文實例講述了php+js實現(xiàn)百度地圖多點標(biāo)注的方法。分享給大家供大家參考,具體如下:
1.php創(chuàng)建json數(shù)據(jù)
$products = $this->product_db->select($where); $products_json = json_encode($products);
2.js傳入json數(shù)據(jù)
類似于這樣的結(jié)構(gòu)
var markerArr = [{ title: "名稱:廣州火車站", point: "113.264531,23.157003", address: "廣東省廣州市廣州火車站", tel: "12306" }, { title: "名稱:廣州塔(赤崗塔)", point: "113.330934,23.113401", address: "廣東省廣州市廣州塔(赤崗塔) ", tel: "18500000000" }, { title: "名稱:廣州動物園", point: "113.312213,23.147267", address: "廣東省廣州市廣州動物園", tel: "18500000000" }, { title: "名稱:天河公園", point: "113.372867,23.134274", address: "廣東省廣州市天河公園", tel: "18500000000" }];
js擅長處理json數(shù)據(jù)
<script> var products_json = {$products_json}; // 百度地圖 var citymap = new citymap(products_json,'宿遷'); </script>
3.處理地圖
document.write('<script type="text/javascript" src=" </script>'); function citymap(markerArr, cityName){ this.markerArr = markerArr; this.cityName = cityName; this.initMap = function() { this.createMap();//創(chuàng)建地圖 this.setMapEvent();//設(shè)置地圖事件 this.addMapControl();//向地圖添加控件 }; this.createMap = function() { var map = new BMap.Map("dituContent");//在百度地圖容器中創(chuàng)建一個地圖 map.centerAndZoom(cityName,'13'); window.map = map;//將map變量存儲在全局 // 繪制點 for (var i = 0; i < markerArr.length; i++) { var p0 = markerArr[i].baidu_lng; var p1 = markerArr[i].baidu_lat; var maker = this.addMarker(new window.BMap.Point(p0, p1),markerArr[i],i ); this.addInfoWindow(maker, markerArr[i], i); } }; this.addMarker = function(point,pro,index) { var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), { offset: new BMap.Size(10, 25), imageOffset: new BMap.Size(0, 0 - index * 25) }); var marker = new BMap.Marker(point, { icon: myIcon }); map.addOverlay(marker); var label = new BMap.Label(pro.name,{offset:new BMap.Size(20,-10)}); // 設(shè)置label樣式 label.setStyle({ color : "#CC3333", fontSize : "13px", backgroundColor :"#CCFFFF", border :"0", fontWeight :"bold" }); marker.setLabel(label); return marker; }; this.addInfoWindow = function(marker,pro) { //pop彈窗標(biāo)題 var title = '<p style="font-weight:bold;color:#CE5521;font-size:14px"> <a href="?m=home&c=product&id='+ pro.id +'">' + pro.name + '</a></p>'; //pop彈窗信息 var html = []; html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>'); html.push('<tr>'); html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>'); html.push('<td style="vertical-align:top;line-height:16px">' + pro.address + ' </td>'); html.push('</tr>'); html.push('</tbody></table>'); var infoWindow = new BMap.InfoWindow(html.join(""), { title: title, width: 200 }); var openInfoWinFun = function() { marker.openInfoWindow(infoWindow); }; marker.addEventListener("click", openInfoWinFun); return openInfoWinFun; } this.setMapEvent = function() { map.enableDragging();//啟用地圖拖拽事件,默認(rèn)啟用(可不寫) // map.enableScrollWheelZoom();//啟用地圖滾輪放大縮小 map.enableDoubleClickZoom();//啟用鼠標(biāo)雙擊放大,默認(rèn)啟用(可不寫) map.enableKeyboard();//啟用鍵盤上下左右鍵移動地圖 }; this.addMapControl = function() { //向地圖中添加縮放控件 var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}); map.addControl(ctrl_nav); //向地圖中添加縮略圖控件 var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1}); map.addControl(ctrl_ove); //向地圖中添加比例尺控件 var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}); map.addControl(ctrl_sca); }; this.initMap(); }
以上就是php+js實現(xiàn)百度地圖多點標(biāo)注的方法?的內(nèi)容,更多相關(guān)內(nèi)容請關(guān)注PHP中文網(wǎng)(www.miracleart.cn)!
立即學(xué)習(xí)“PHP免費學(xué)習(xí)筆記(深入)”;
百度地圖作為新一代人工智能地圖,服務(wù)覆蓋全球200+城市及國家。導(dǎo)航可信賴、語音交互更簡單、數(shù)據(jù)豐富更貼心的百度地圖,致力于為用戶提供更準(zhǔn)確、更豐富、更易用的出行服務(wù)。有需要的小伙伴快來保存下載體驗吧!
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://www.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號