百度地图定位导航 |
---|
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MapByChargingPile</title>
</head>
<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=1.0&type=webgl&ak=aVqYqiGAjxdZ7ZZVqMyt2p8pgR3TN3Nn"></script>
<body>
<div>
<input type="text" placeholder="选择起始位置" id="start">
<input type="text" placeholder="选择目的地" id="end">
<input type="submit" value="搜索" id="search">
</div>
<div id="container"></div>
<script type="text/javascript">
var map = new BMapGL.Map("container");
map.enableScrollWheelZoom();
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
var search = document.getElementById("search");
search.onclick = function(){
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var walking = new BMapGL.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
walking.search(start, end);
}
</script>
</body>
</html>