百度地图

<!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>

// 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(100.132770 ,26.525043),11);
     map.enableScrollWheelZoom(true);
     
     // 用经纬度设置地图中心点
     function theLocation(){
         if(document.getElementById("longitude").value != "" && document.getElementById("latitude").value != ""){
            map.clearOverlays(); 
            var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value);
            var marker = 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 transit = new BMap.DrivingRoute(map, {
        renderOptions: {
            map: map,
           panel: "r-result",
            enableDragging : true //起终点可进行拖拽
        },  
    });
   transit.search("遂宁站,南京站”)


地图显示和百度地图显示一样




posted @ 2019-01-11 11:15  JinQyuh  阅读(227)  评论(0编辑  收藏  举报