Test Baidu Maps

by Andrey Izman

HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>可拖拽的沿道路测距</title>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=QiG3eSGRXWcbe0EHb4sIQZtk"></script>
</head>
<body>
<input type="button" value="重新开始" onclick="myClear();" />
<input type="button" value="计算距离" onclick="myFigure();" />
<p>总路程是：<span id="myDistance"></span></p>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
<p>使用说明：</p>
<ol>
    <li>红色标注可拖拽</li>
    <li>点击“计算距离”按钮，开始测距。结果用红色文字标出</li>
    <li>点击“重新开始”按钮，清除测距结果</li>
</ol>
</body>
</html>

JavaScript

//初始化地图
var map = new BMap.Map("container");
var point = new BMap.Point(114.5144, 38.04228); //中心点坐标
map.centerAndZoom(point,12);

//控件
var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}    
map.addControl(new BMap.NavigationControl(opts)); //左上角放置平移缩放

var userset = 0;

if(userset == 1)
{
//两秒钟后移动到新的中心点
window.setTimeout(function(){  
    map.panTo(new BMap.Point(114.549498,38.028404)); //万达
  //map.panTo(new BMap.Point(114.528509, 38.056779)); //财富
}, 1000);
}
else
{
// 百度地图API功能
var local = new BMap.LocalSearch(map, {
  renderOptions:{map: map,selectFirstResult:true,autoViewport:false}
});
local.search("众美城B区");
}

//创建两个可以拖动的标注
/*var p1 = new BMap.Point(114.549498,38.028404);//万达
var p2 = new BMap.Point(114.562749,37.992993);//众美
var m1 = new BMap.Marker(p1);
var m2 = new BMap.Marker(p2);
map.addOverlay(m1);
map.addOverlay(m2);
m1.enableDragging();    //标注可拖拽的设置
m2.enableDragging();*/
var p1 = new BMap.Point(114.549498,38.028404);//万达
var m1 = new BMap.Marker(p1,{enableDragging: true,raiseOnDrag: true});
map.addOverlay(m1);
//m1.enableDragging();  
m1.addEventListener("dragend", function(e){    
 alert("当前位置：" + e.point.lng + ", " + e.point.lat);    
})

addClickHandler('万达广场',m1);

// 添加超市标注 

var suppliers = new Array(
  new Array('永辉超市怀特店',     '114.531106', '38.028297'),
  new Array('永辉超市财富大厦店', '114.528509', '38.056779'),
  new Array('永辉超市小马店',     '114.578325', '38.03013'),
  new Array('永辉超市新石店',     '114.459271', '38.021766'),
  new Array('永辉超市西美五洲店', '114.569996', '38.026314'),
  new Array('永辉超市民心广场店', '114.475448', '38.039893')
);

for (var i = 0; i < suppliers.length; i++) {   

 var point = new BMap.Point(suppliers[i][1], suppliers[i][2]);  
 var supplier = suppliers[i][0];
 addSupplierMarker(point, supplier);     
}



//驾车导航用来计算沿道路的距离
var searchComplete = function (results){
    if (transit.getStatus() != BMAP_STATUS_SUCCESS){
        return ;    }  
        var plan = results.getPlan(0);
        output = "<b style='color:red;'>" +...