绘制百度地图

百度地图API：https://lbsyun.baidu.com/index.php?title=jspopular
高德地图API：https://lbs.amap.com/
定位、地图、轨迹、路径规划、导航、路况

准备工作

申请秘钥

注：Referer白名单中如果你是直接自己开发可以先把所有权限都先放开，可以直接填写’*’

组件

初始helloword中JS代码说明

var map = new BMap.Map("container");
// 创建地图实例  

var point = new BMap.Point(116.404, 39.915); //地图中最中心的坐标点的经纬度
// 创建点坐标  

map.centerAndZoom(point, 15);   //15表示缩放的大小 数字越小地图显示的越大
// 初始化地图，设置中心点坐标和地图级别

附加其他功能进行展示

地图缩放和滑动

	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
    map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
	map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
	localSearch.enableAutoViewport(); //允许自动调节窗体大小

添加标注

var marker = new BMap.Marker(point);        // 创建标注    
map.addOverlay(marker);                     // 将标注添加到地图中 

//添加点击事件
marker.addEventListener("click", function(){    
    alert("您点击了标注");    
});  

//拖拽标注及其事件
marker.enableDragging();    
marker.addEventListener("dragend", function(e){    
    alert("当前位置：" + e.point.lng + ", " + e.point.lat);    
})

信息框的显示 （信息窗口）

var opts = {    
    width : 250,     // 信息窗口宽度    
    height: 100,     // 信息窗口高度    
    title : "Hello"  // 信息窗口标题   
}    
var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象    
map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口

完整代码

<!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:100%}  
</style>  
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=您的密钥">
//v2.0版本的引用方式：src="https://api.map.baidu.com/api?v=2.0&ak=您的密钥"
</script>
</head>  
 
<body>  
<div id="container"></div> 
<script type="text/javascript"> 
var map = new BMap.Map("container");
// 创建地图实例  
var point = new BMap.Point(116.404, 39.915); //地图中最中心的坐标点的经纬度
// 创建点坐标  
map.centerAndZoom(point, 15);   //15表示缩放的大小 数字越小地图显示的越大
// 初始化地图，设置中心点坐标和地图级别  


//标注
var marker = new BMap.Marker(point);        // 创建标注    
map.addOverlay(marker);                     // 将标注添加到地图中 
//添加点击事件
marker.addEventListener("click", function(){    
    alert("您点击了标注");    
});  
//拖拽标注及其事件
marker.enableDragging();    
marker.addEventListener("dragend", function(e){    
    alert("当前位置：" + e.point.lng + ", " + e.point.lat);    
}) 

//信息窗口
var opts = {    
    width : 250,     // 信息窗口宽度    
    height: 100,     // 信息窗口高度    
    title : "Hello"  // 信息窗口标题   
}    
var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象    
map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
</script>  
</body>  
</html>

路线规划

单点到固定位置路线规划

<!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:100%}  
</style>  
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=您的密钥">
//v2.0版本的引用方式：src="https://api.map.baidu.com/api?v=2.0&ak=您的密钥"
</script>
</head>  
 
<body>  
<div id="container"></div> 
<script type="text/javascript"> 
var map = new BMap.Map("container");
// 创建地图实例  
var point = new BMap.Point(116.417854,39.921988); //终点坐标点的经纬度
// 创建点坐标  
map.centerAndZoom(point, 15);   //15表示缩放的大小 数字越小地图显示的越大
// 初始化地图，设置中心点坐标和地图级别  
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

//标注
var marker = new BMap.Marker(point);        // 创建标注    
map.addOverlay(marker);                     // 将标注添加到地图中 

map.addEventListener("click", function(e){ 
    map.clearOverlays();   //点击之后清除前面的标记点
    var point2 = new BMap.Point(e.point.lng , e.point.lat)
    var marker = new BMap.Marker(point2);        // 创建点击的位置为起点坐标
    map.addOverlay(marker);                     // 将标注添加到地图中 
    
    //驾车路线规划
    var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
    driving.search(point2, point);
})
</script>  
</body>  
</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: "微软雅黑";
        }
        .anchorBL {
            display: none;
        }
    </style>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
    <title></title>
</head>
<body>
<div id="allmap"></div>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom("地图", 14);
    var walking = new BMap.WalkingRoute(map, {
        renderOptions: {
            map: map,
            autoViewport: true
        }
    });
    map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
    //路况
    var traffic = new BMap.TrafficLayer();        // 创建交通流量图层实例
    map.addTileLayer(traffic);                    // 将图层添加到地图上
    var myIcon = new BMap.Icon("start.png", new BMap.Size(28, 28);
    var _points = [];
    map.addEventListener("click", function (e) {
        var _point = {
            lng: "",
            lat: ""
        };
        _point.lng = e.point.lng;
        _point.lat = e.point.lat;
        _points.push(_point);
        map.addOverlay(new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat), {icon: myIcon}));
        console.log(_points);
        // alert(e.point.lng + "," + e.point.lat);
        if (_points.length === 2) {
            var start = new BMap.Point(_points[0].lng, _points[0].lat);
            var end = new BMap.Point(_points[1].lng, _points[1].lat);
            walking.search(start, end);
            map.clearOverlays();
            _points = [];
        }
    });
</script>
</body>
</html>