web開發百度地圖
公司網站需要百度地圖的支援，最近從一點沒接觸過，到開始看官網api一點點開發，算是小菜鳥的學習筆記
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:70%;width:70%;margin-top:30px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=K9n2sNS1ImQoF38mQHb2h6Ke">
//v1.5版本的引用方式：src="http://api.map.baidu.com/api?v=1.5&ak=您的金鑰"
//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的金鑰&callback=initialize"
</script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="container"></div>
<div ><input type="button" onclick="drawPline();" value="refresh!"/></div>
<script type="text/javascript">
// 建立地圖例項
function createBMap(point,level) {
var map = new BMap.Map("container");
map.centerAndZoom(point, level);
// map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP]}));
// map.setMapType(new MapType().BMAP_SATELLITE_MAP);
map.enableScrollWheelZoom(); //啟用滾輪放大縮小，預設禁用
map.enableContinuousZoom(); //啟用地圖慣性拖拽，預設禁用
map.addControl(new BMap.NavigationControl()); //新增預設縮放平移控制元件
// map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL})); //右上角，僅包含平移和縮放按鈕
// map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN})); //左下角，僅包含平移按鈕
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM})); //右下角，僅包含縮放按鈕
map.addControl(new BMap.ScaleControl()); // 新增預設比例尺控制元件
map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT})); // 左上
// map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_RIGHT})); // 右上
// map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT})); // 左下
map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT})); // 右下
return map;
}
function drawPoint(){
var walking = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
var point_dot = new BMap.Point(GetRandomNum_X(1,10),GetRandomNum_Y(1,10));
walking.search(new BMap.Point(116.399, 39.910),point);
}
var point =[ /***此大段的座標為北京新發地農產品批發市場到國貿的路線座標。哭。。。老闆要看這一段，目前沒有資訊反饋只能手工模擬**/
//new BMap.Point(116.399, 39.910),
new BMap.Point(116.345295,39.828504),new BMap.Point(116.345296,39.828692),
new BMap.Point(116.345691,39.828685),new BMap.Point(116.347016,39.828654),
new BMap.Point(116.348117,39.828609),
new BMap.Point(116.348215,39.828595), new BMap.Point(116.349208,39.828453),
new BMap.Point(116.3514,39.828179), new BMap.Point(116.352051,39.828089),
new BMap.Point(116.352334,39.830119), new BMap.Point(116.352568,39.831635),
new BMap.Point(116.352842,39.833339), new BMap.Point(116.352949,39.833821),
new BMap.Point(116.353062,39.83407), new BMap.Point(116.353273,39.834323),
new BMap.Point(116.354989,39.835666), new BMap.Point(116.355725,39.836186),
new BMap.Point(116.356102,39.836348), new BMap.Point(116.356093,39.836338),
new BMap.Point(116.3567,39.836456), new BMap.Point(116.356969,39.836473),
new BMap.Point(116.356884,39.836466), new BMap.Point(116.357926,39.836511),
new BMap.Point(116.360239,39.836549), new BMap.Point(116.361986,39.836584),
new BMap.Point(116.363769,39.836622), new BMap.Point(116.365629,39.836636),
new BMap.Point(116.36624,39.83665), new BMap.Point(116.366837,39.836632),
new BMap.Point(116.367484,39.836643), new BMap.Point(116.367677,39.836667),
new BMap.Point(116.36867,39.836695), new BMap.Point(116.369096,39.836844),
new BMap.Point(116.370857,39.836927), new BMap.Point(116.372577,39.836972),
new BMap.Point(116.372703,39.836986), new BMap.Point(116.374769,39.837065),
new BMap.Point(116.376233,39.837152), new BMap.Point(116.377644,39.837211),
new BMap.Point(116.379723,39.837328), new BMap.Point(116.382037,39.837439),
new BMap.Point(116.383353,39.837505), new BMap.Point(116.38527,39.837602),
new BMap.Point(116.388118,39.83772), new BMap.Point(116.389973,39.837796),
new BMap.Point(116.393027,39.837938), new BMap.Point(116.395552,39.838049),
new BMap.Point(116.400043,39.838194), new BMap.Point(116.402936,39.838322),
new BMap.Point(116.406156,39.838423), new BMap.Point(116.409291,39.838502),
new BMap.Point(116.413837,39.83852), new BMap.Point(116.418099,39.838488),
new BMap.Point(116.421845,39.83843), new BMap.Point(116.424405,39.838381),
new BMap.Point(116.425339,39.83835), new BMap.Point(116.425829,39.83827),
new BMap.Point(116.426071,39.83826), new BMap.Point(116.426898,39.83826),
new BMap.Point(116.42776,39.838246), new BMap.Point(116.429238,39.838035),
new BMap.Point(116.430267,39.837927), new BMap.Point(116.431039,39.837862),
new BMap.Point(116.431331,39.837692), new BMap.Point(116.431358,39.837481),
new BMap.Point(116.431178,39.837141), new BMap.Point(116.431115,39.837083),
new BMap.Point(116.430909,39.836986), new BMap.Point(116.430774,39.836968),
new BMap.Point(116.43063,39.837003), new BMap.Point(116.430617,39.836999),
new BMap.Point(116.430505,39.837031), new BMap.Point(116.430388,39.837069),
new BMap.Point(116.430352,39.837079), new BMap.Point(116.430114,39.837308),
new BMap.Point(116.430064,39.837446), new BMap.Point(116.430087,39.837865),
new BMap.Point(116.43015,39.838447), new BMap.Point(116.430064,39.839136),
new BMap.Point(116.43006,39.839233), new BMap.Point(116.429889,39.839867),
new BMap.Point(116.429853,39.839929), new BMap.Point(116.429301,39.840895),
new BMap.Point(116.428668,39.841906), new BMap.Point(116.428268,39.842872),
new BMap.Point(116.428187,39.843426), new BMap.Point(116.428277,39.845535),
new BMap.Point(116.428371,39.848429), new BMap.Point(116.428367,39.850583),
new BMap.Point(116.428344,39.852438), new BMap.Point(116.428389,39.854785),
new BMap.Point(116.428438,39.857015), new BMap.Point(116.428537,39.860404),
new BMap.Point(116.428596,39.862443), new BMap.Point(116.428587,39.863426),
new BMap.Point(116.43024,39.863682), new BMap.Point(116.431309,39.863844),
new BMap.Point(116.432032,39.86408), new BMap.Point(116.433442,39.864249),
new BMap.Point(116.436761,39.864409), new BMap.Point(116.438226,39.864471),
new BMap.Point(116.439717,39.864703), new BMap.Point(116.442003,39.864654),
new BMap.Point(116.4434,39.864731), new BMap.Point(116.44499,39.864744),
new BMap.Point(116.448385,39.864623), new BMap.Point(116.450883,39.864554),
new BMap.Point(116.452976,39.864551), new BMap.Point(116.454431,39.86472),
new BMap.Point(116.457121,39.865568), new BMap.Point(116.459084,39.866655),
new BMap.Point(116.460445,39.867693), new BMap.Point(116.463378,39.870057),
new BMap.Point(116.465777,39.872002), new BMap.Point(116.466531,39.87265),
new BMap.Point(116.466967,39.873131), new BMap.Point(116.467461,39.873986),
new BMap.Point(116.467712,39.875052), new BMap.Point(116.467775,39.877322),
new BMap.Point(116.467852,39.880803), new BMap.Point(116.467937,39.885921),
new BMap.Point(116.46804,39.89089), new BMap.Point(116.468072,39.894765),
new BMap.Point(116.468153,39.898515), new BMap.Point(116.468233,39.902622),
new BMap.Point(116.468404,39.903144), new BMap.Point(116.468445,39.905313),
new BMap.Point(116.468454,39.906275), new BMap.Point(116.468404,39.906382),
new BMap.Point(116.468498,39.908634), new BMap.Point(116.46862,39.909181),
new BMap.Point(116.468602,39.911585), new BMap.Point(116.468804,39.912107),
new BMap.Point(116.468804,39.912802), new BMap.Point(116.468692,39.91319),
new BMap.Point(116.468714,39.914756), new BMap.Point(116.468701,39.914144),
new BMap.Point(116.467434,39.914155), new BMap.Point(116.466666,39.914137),
new BMap.Point(116.467524,39.914319)
];
var i = 0;
var map = createBMap(point[i],15);
var point_car = [];
var marker2 ;
function drawPline(){
var bs = map.getBounds(); //獲取可視區域
var bssw = bs.getSouthWest(); //可視區域左下角
var bsne = bs.getNorthEast(); //可視區域右上角
var topLat = bsne.lat;
var bottomLat = bssw.lat;
var leftLng = bssw.lng;
var rightLng = bsne.lng;
var length=2;
//for(i;i<length+i;i++){
point_car.push(point[i]);
point_car.push(point[i+1]);
//}
var pt = point[i+1];
i = i+2;
drawPolyline(map,point_car);
var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(20,25));
if(pt.lat>topLat||pt.lat<bottomLat||pt.lng<leftLng||pt.lng>rightLng){
map = createBMap(pt,15);
drawPolyline(map,point_car);
}
map.removeOverlay(marker2);
marker2 = new BMap.Marker(pt,{icon:myIcon}); // 建立標註
map.addOverlay(marker2); // 將標註新增到地圖中
}
function GetRandomNum(Min,Max)
{
var Range = Max - Min;
var Rand = Math.random();
return (Min + Math.round(Rand * Range));
}
/**
* 畫線
* @param bMap
* @param points
*/
function drawPolyline(bMap, points) {
bMap = map;
if (points==null || points.length<=1) {
return;
}
bMap.addOverlay(new BMap.Polyline(points, {
strokeColor : "red",
strokeWeight : 3,
strokeOpacity : 0.5
})); // 畫線
}
</script>
</body>
</html>