<!DOCTYPE html> <html lang="en"> <head> <!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" /> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0zoDf36d88YDLBpLiIwW0ARfegyltOQt"></script> <title>Baidu Map </title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} #allmap{ height: 500px; } </style> </head> <body> <div id="allmap"></div> </body> <script type="text/javascript" src="./map.js"> </script> </html>
1 // 百度地图API功能 2 var map = new BMap.Map("allmap"); 3 map.centerAndZoom(new BMap.Point(100.132770 ,26.525043),11); 4 map.enableScrollWheelZoom(true); 5 6 // 用经纬度设置地图中心点 7 function theLocation(){ 8 if(document.getElementById("longitude").value != "" && document.getElementById("latitude").value != ""){ 9 map.clearOverlays(); 10 var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value); 11 var marker = new BMap.Marker(new_point); // 创建标注 12 map.addOverlay(marker); // 将标注添加到地图中 13 map.panTo(new_point); 14 } 15 16 } 17 var transit = new BMap.DrivingRoute(map, { 18 renderOptions: { 19 map: map, 20 panel: "r-result", 21 enableDragging : true //起终点可进行拖拽 22 }, 23 }); 24 transit.search("丽江站","古城区体育场");
运行效果如下：
可以缩放大小也可以改变始终点，地图便自动推荐路线
