不要忘记引用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>