参考地址 百度地图点、线、箭头
线：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=cxxxx59xxxxAyigxxxx"></script>
<title>连线</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom("郑州",5); //初始化地图,设置城市和地图级别。
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
//map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //右下角，打开
var lineList = [
{ title: "1", pointA: "116.364531,40.057003",pointB: "118.79687,32.06025"},
{ title: "2",pointA: "91.14085,29.64555",pointB: "102.71,25.0458"},
{ title: "3", pointA: "120.58531,31.29888",pointB: "126.53496,45.80377"},
{ title: "4", pointA: "101.77822,36.61714",pointB: "118.08942,24.47983"}
];
if(lineList.length == 0){
var pointA = new BMap.Point('','');
var pointB = new BMap.Point('','');
var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5}); //定义折线
map.addOverlay(polyline); //添加折线到地图上
}else{
for (var i = 0; i < lineList.length; i++) {
if(isNaN(lineList[i].pointA) && isNaN(lineList[i].pointB) && lineList[i].pointA.indexOf(',') > -1 && lineList[i].pointB.indexOf(',') > -1 ){
var pAJ = lineList[i].pointA.split(",")[0];
var pAW = lineList[i].pointA.split(",")[1];
var pBJ = lineList[i].pointB.split(",")[0];
var pBW = lineList[i].pointB.split(",")[1];
var pointA = new BMap.Point(pAJ,pAW);
var pointB = new BMap.Point(pBJ,pBW);
var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polyline);
}
}
}
</script>
点：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap{height:500px;width:100%;}
#r-result{width:100%; font-size:14px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=csnx5xxxawttrxxxxx"></script>
<title>标注</title>
</head>
<body>
<div id="allmap" ></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom("郑州",5); //初始化地图,设置城市和地图级别。
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
//var points = [];
//points.push(new BMap.Point(116.331398, 39.897445));
//points.push(new BMap.Point(108.312241, 22.787823));
//points.push(new BMap.Point(110.312241, 22.787823));
var points = [
{ title: "1", pointA: "116.364531,40.057003"},
{ title: "2",pointA: "91.14085,29.64555"},
{ title: "3", pointA: "120.58531,31.29888"},
{ title: "4", pointA: "101.77822,36.61714"}
];
//用经纬度设置地图中心点
map.clearOverlays();
for (i = 0; i < points.length; i++) {
//var point = points[i];
var pAJ = points[i].pointA.split(",")[0];
var pAW = points[i].pointA.split(",")[1];
var point = new BMap.Point(pAJ,pAW);
var marker = new BMap.Marker(point); // 创建标注
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
map.addOverlay(marker); // 将标注添加到地图中
var opts = {
width : 200, // 信息窗口宽度
height : 100, // 信息窗口高度
title : "车辆信息", // 信息窗口标题
enableMessage : true, //设置允许信息窗发送短息
message : "车辆在途跟踪！"
}
var infoWindow = new BMap.InfoWindow("车牌号： <br>" + "<a href='#'>查看调度</a>", opts); // 创建信息窗口对象
marker.addEventListener("mouseover", (function (info, po) {
return function(){
map.openInfoWindow(info, po); //开启信息窗口
}
})(infoWindow, point));
}
</script>
箭头：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap{height:500px;width:100%;}
#r-result{width:100%; font-size:14px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=csxxx9GxxxxxVZ0xx"></script>
<title>城市名定位</title>
</head>
<body>
<div id="allmap" ></div>
<div id="r-result">
经度: <input id="longitude" type="text" style="width:100px; margin-right:10px;" />
纬度: <input id="latitude" type="text" style="width:100px; margin-right:10px;" />
<input type="button" value="查询" onclick="theLocation()" />
</div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.331398, 39.897445), 11);
map.addControl(new BMap.NavigationControl());
map.enableScrollWheelZoom(true);
var points = [];
points.push(new BMap.Point(116.331398, 39.897445));
points.push(new BMap.Point(108.312241, 22.787823));
points.push(new BMap.Point(110.312241, 22.787823));
var polyline = new BMap.Polyline(points, {
strokeColor : "red", //设置颜色
strokeWeight : 3, //宽度
strokeOpacity : 0.5
}); //透明度
// 用经纬度设置地图中心点
function theLocation() {
map.clearOverlays();
for (i = 0; i < points.length; i++) {
//var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value);
var point = points[i];
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
var opts = {
width : 200, // 信息窗口宽度
height : 100, // 信息窗口高度
title : "车辆信息", // 信息窗口标题
enableMessage : true, //设置允许信息窗发送短息
message : "车辆在途跟踪！"
}
var infoWindow = new BMap.InfoWindow("车牌号： <br>" + "<a href='#'>查看调度</a>", opts); // 创建信息窗口对象
marker.addEventListener("click", (function (info, po) {
return function(){
map.openInfoWindow(info, po); //开启信息窗口
}
})(infoWindow, point));
}
//alert(map.getDistance(new BMap.Point(108.312241,22.787823),new BMap.Point(116.323308,24.811744)));
if (document.getElementById("longitude").value != "" && document.getElementById("latitude").value != "") {
var new_point = new BMap.Point(document.getElementById("longitude").value, document.getElementById("latitude").value);
var marker = new BMap.Marker(new_point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(new_point);
var opts = {
width : 200, // 信息窗口宽度
height : 100, // 信息窗口高度
title : "车辆信息", // 信息窗口标题
enableMessage : true, //设置允许信息窗发送短息
message : "车辆在途跟踪！"
}
var infoWindow = new BMap.InfoWindow("车牌号： <br>" + "<a href='#'>查看调度</a>", opts); // 创建信息窗口对象
marker.addEventListener("click", function () {
map.openInfoWindow(infoWindow, new_point); //开启信息窗口
});
}
map.addOverlay(polyline);
addArrow(polyline, 50, Math.PI / 7);
}
function addArrow(polyline, length, angleValue) { //绘制箭头的函数
var linePoint = polyline.getPath(); //线的坐标串
var arrowCount = linePoint.length;
for (var i = 1; i < arrowCount; i++) { //在拐点处绘制箭头
var pixelStart = map.pointToPixel(linePoint[i - 1]);
var pixelEnd = map.pointToPixel(linePoint[i]);
var angle = angleValue; //箭头和主线的夹角
var r = length; // r/Math.sin(angle)代表箭头长度
var delta = 0; //主线斜率，垂直时无斜率
var param = 0; //代码简洁考虑
var pixelTemX,
pixelTemY; //临时点坐标
var pixelX,
pixelY,
pixelX1,
pixelY1; //箭头两个点
if (pixelEnd.x - pixelStart.x == 0) { //斜率不存在是时
pixelTemX = pixelEnd.x;
if (pixelEnd.y > pixelStart.y) {
pixelTemY = pixelEnd.y - r;
} else {
pixelTemY = pixelEnd.y + r;
}
//已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法
pixelX = pixelTemX - r * Math.tan(angle);
pixelX1 = pixelTemX + r * Math.tan(angle);
pixelY = pixelY1 = pixelTemY;
} else { //斜率存在时
delta = (pixelEnd.y - pixelStart.y) / (pixelEnd.x - pixelStart.x);
param = Math.sqrt(delta * delta + 1);
if ((pixelEnd.x - pixelStart.x) < 0) { //第二、三象限
pixelTemX = pixelEnd.x + r / param;
pixelTemY = pixelEnd.y + delta * r / param;
} else { //第一、四象限
pixelTemX = pixelEnd.x - r / param;
pixelTemY = pixelEnd.y - delta * r / param;
}
//已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法
pixelX = pixelTemX + Math.tan(angle) * r * delta / param;
pixelY = pixelTemY - Math.tan(angle) * r / param;
pixelX1 = pixelTemX - Math.tan(angle) * r * delta / param;
pixelY1 = pixelTemY + Math.tan(angle) * r / param;
}
var pointArrow = map.pixelToPoint(new BMap.Pixel(pixelX, pixelY));
var pointArrow1 = map.pixelToPoint(new BMap.Pixel(pixelX1, pixelY1));
var Arrow = new BMap.Polyline([
pointArrow,
linePoint[i],
pointArrow1
], {
strokeColor : "blue",
strokeWeight : 3,
strokeOpacity : 0.5
});
map.addOverlay(Arrow);
}
}
</script>