不要忘記引用JQuery//~~~<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html, #locationmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<title>百度地圖顯示多點位置並連線</title>
</head>
<body>
<div id="locationmap"></div>
</body>
</html>
<script type="text/javascript">
var city = "北京";
var map = new BMap.Map("locationmap"); // 百度地圖API功能
map.centerAndZoom(city, 14); // 設置地圖顯示的城市和地圖級別
map.enableScrollWheelZoom(); // 啟用滾輪放大縮小，默認禁用
map.enableContinuousZoom(); // 啟用地圖慣性拖拽，默認禁用
map.addControl(new BMap.NavigationControl()); // 添加默認縮放平移控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.MapTypeControl()); // 添加地圖類型控件
map.addControl(new BMap.OverviewMapControl()); // 添加縮略地圖控件
$(function(){
search();
})
function search()
{
var result = [{"id":'1',"address":"故宮博物館","userid":"a1","longitude":"116.404355","latitude":"39.922723","datetime":"2016"},
{"id":'2',"address":"北海公園","userid":"a2","longitude":"116.396307","latitude":"39.932018","datetime":"2016"},
{"id":'3',"address":"首都博物館","userid":"a3","longitude":"116.350601","latitude":"39.911434","datetime":"2016"},
{"id":'4',"address":"清華大學","userid":"a4","longitude":"116.335078","latitude":"40.008106","datetime":"2016"}];
map.clearOverlays(); // 清除標注信息
var points = []; // 添加折線運動軌跡
for(i=0;i<result.length;i++)
{
var userid = result[i].userid; // 用戶ID
var longitude = result[i].longitude; // 經度
var latitude = result[i].latitude; // 緯度
var address = result[i].address; // 地點
var sign_time = result[i].datetime; // 簽到時間
var point = new BMap.Point(longitude, latitude); // 填充標注點
if(i==0)
{
city = result[i].address;
map.centerAndZoom(city, 14);
map.setCenter(point); // 設置中心坐標
}
var tips = userid + "，" + sign_time + "，" + address;
addMarker(point, map, tips);
points.push(point);
}
var polyline = new BMap.Polyline(points);
map.addOverlay(polyline);
}
//編寫自定義函數,創建標注
function addMarker(point, map, tips)
{
var marker = new BMap.Marker(point);
map.addOverlay(marker);
//為標注添加文字信息
var label = new BMap.Label(tips,{offset:new BMap.Size(20,-10)});
marker.setLabel(label);
}
</script>