百度地图API之折线
生活随笔
收集整理的這篇文章主要介紹了
百度地图API之折线
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
剛接觸百度地圖api不久，再根據坐標數據畫折線上，傷了不少腦筋，使用它想小伙伴們多，文檔也算豐富，
現總結下在地圖上折線的表示。
地圖官方例子參考：http://developer.baidu.com/map/jsdemo.htm#a1_2
1、引用地圖api
? 如：
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>?2、準備地圖渲染的容器及設置地圖大小如：
<!--百度地圖容器--> <div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>3、創建地圖：?（1）創建地圖；
?（2）定義中心坐標；
?（3）設置地圖等級并將地圖顯示在容器中
?如：
var map = new BMap.Map("dituContent");//在百度地圖容器中創建一個地圖var point = new BMap.Point(122.263053,29.726606);//定義一個中心點坐標map.centerAndZoom(point,15);//設定地圖的中心點和坐標并將地圖顯示在地圖容器中4、描點添加覆蓋物（折線）
所有代碼如下：
<!DOCTYPE html> <html> <head><title>BMap API</title><meta charset="utf-8" /><!--引用百度地圖API--><style type="text/css">html,body{margin:0;padding:0;}.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script><script type="text/javascript" src="js/arrow.js"></script> </head><body> <!--百度地圖容器--> <div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div> </body> <script type="text/javascript">//創建和初始化地圖函數：function initMap(){createMap();//創建地圖setMapEvent();//設置地圖事件addMapControl();//向地圖添加控件addPolyline();//向地圖中添加線}//創建地圖函數：function createMap(){var map = new BMap.Map("dituContent");//在百度地圖容器中創建一個地圖var point = new BMap.Point(122.263053,29.726606);//定義一個中心點坐標map.centerAndZoom(point,15);//設定地圖的中心點和坐標并將地圖顯示在地圖容器中window.map = map;//將map變量存儲在全局}//地圖事件設置函數：function setMapEvent(){map.enableDragging();//啟用地圖拖拽事件，默認啟用(可不寫)map.enableScrollWheelZoom();//啟用地圖滾輪放大縮小map.enableDoubleClickZoom();//啟用鼠標雙擊放大，默認啟用(可不寫)map.enableKeyboard();//啟用鍵盤上下左右鍵移動地圖}//地圖控件添加函數：function addMapControl(){//向地圖中添加縮放控件var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});map.addControl(ctrl_nav);//向地圖中添加比例尺控件var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});map.addControl(ctrl_sca);}//標注線數組var plPoints = [{weight:2,color:"blue",opacity:0.6,points:["122.251285|29.732870","122.25734|29.735576","122.26043|29.731436","122.256262|29.728614","122.257418|29.7253407","122.257783|29.722075","122.2649623|29.720381"]}];//向地圖中添加線函數function addPolyline(){for(var i=0;i<plPoints.length;i++){var json = plPoints[i];var points = [];for(var j=0;j<json.points.length;j++){var p1 = json.points[j].split("|")[0];var p2 = json.points[j].split("|")[1];points.push(new BMap.Point(p1,p2));}var line = new BMap.Polyline(points,{strokeWeight:json.weight,strokeColor:json.color,strokeOpacity:json.opacity});map.addOverlay(line);addArrow(line);}}initMap();//創建和初始化地圖 </script> </html>5、添加注標，文字標簽及樣式
6、成功！北斗七星陣已布好
效果如下圖：?
? ?
總結
以上是生活随笔為你收集整理的百度地图API之折线的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何参加IBM认证考试----便于查询认
- 下一篇： 第02章 Unicode简介