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

posted on 2016-06-20 10:36  撿忔  阅读(6800)  评论(0编辑  收藏  举报