課程
/前端開發(fā)
/JavaScript
/如何使用高德JS-API進行基于LBS的開發(fā)
老師,為什么我按照你寫的代碼敲的,可是出來的只有地圖,沒有路徑?。烤褪悄菞l線,還有后臺的一些經過的路徑信息???
2015-10-15
源自:如何使用高德JS-API進行基于LBS的開發(fā) 5-1
正在回答
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
? ? <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
? ? <title>獲取地理位置</title>
? ? <style type="text/css">
#iCenter{width:800px; height: 800px; border:1px #000 solid;margin:20px auto;float:left;}
#id{width: 600px;height: 500px; border:1px #000 solid;margin:20px auto;float: left;}
</style>
? ? <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=你的KEY值"></script>
</head>
<body>
<div id="id"></div>
<div id="iCenter"></div>
<script type="text/javascript">
? ? //基本地圖加載
? ? var map = new AMap.Map("iCenter", {
? ? ? ? resizeEnable: true,
? ? ? ? center: [116.397428, 39.90923],//地圖中心點
? ? ? ? zoom: 13 //地圖顯示的縮放級別
? ? });
? ? //增加比例尺
? ? map.plugin(['AMap.Scale'],function(){
? ? ? ? var Scale=new AMap.Scale();
? ? ? ? map.addControl(Scale);
? ? map.plugin('AMap.Driving',function(){
? ? ? ? var driving=new AMap.Driving({
? ? ? ? ? ? policy:AMap.DrivingPolicy.LEAST_TIME
? ? ? ? });?
? ? ? ? driving.search(new AMap.LngLat(116.322056,39.89491), new AMap.LngLat(116.352994,39.945261));
? ? ? ? AMap.event.addListener(driving,'complete',function(e){
? ? ? ? ? ? var a=e.routes[0].steps;? ? ? ?
? ? ? ? ? ? addMarker(a[0].path[0]);
? ? ? ?for(var i=0;i<a.length;i++){?
? ? ? ? ? ? var b=document.getElementById('id').innerHTML+=a[i].instruction+'<br>';
? ? ? ? ? ? drawLine(a[i].path,map);
? ? ? ?}
? ? ? ?map.setZoom(12);
? ? ? ? });
? ? function addMarker(position){
? ? ? ? var mk=new AMap.Marker({
? ? ? ? ? ? map:map,
? ? ? ? ? ? position:position? ??
? ? }
? ? function drawLine(data,map){
? ? ? ? var polyline=new AMap.Polyline({
? ? ? ? ? ? path:data,? ? ? ? ? ?
? ? ? ? ? ? strokeColor: 'red',?
? ? ? ? ? ? strokeOpacity:0.9,
? ? ? ? ? ? strokeWeight:4,
? ? ? ? ? ? strokeDasharray:[10,5]
</script>
</body>
</html>
------------------------------------------------
可以實現(xiàn)的,代碼如上,要自己寫自己的KEY
其他同學有跟我一樣的嗎?是我瀏覽器插件不足嗎?
舉報
教你用高德JS-API進行基于LBS開發(fā),動手實現(xiàn)你的第一個地圖應用
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2018-12-17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
? ? <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
? ? <title>獲取地理位置</title>
? ? <style type="text/css">
#iCenter{width:800px; height: 800px; border:1px #000 solid;margin:20px auto;float:left;}
#id{width: 600px;height: 500px; border:1px #000 solid;margin:20px auto;float: left;}
</style>
? ? <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=你的KEY值"></script>
</head>
<body>
<div id="id"></div>
<div id="iCenter"></div>
<script type="text/javascript">
? ? //基本地圖加載
? ? var map = new AMap.Map("iCenter", {
? ? ? ? resizeEnable: true,
? ? ? ? center: [116.397428, 39.90923],//地圖中心點
? ? ? ? zoom: 13 //地圖顯示的縮放級別
? ? });
? ? //增加比例尺
? ? map.plugin(['AMap.Scale'],function(){
? ? ? ? var Scale=new AMap.Scale();
? ? ? ? map.addControl(Scale);
? ? });
? ? map.plugin('AMap.Driving',function(){
? ? ? ? var driving=new AMap.Driving({
? ? ? ? ? ? policy:AMap.DrivingPolicy.LEAST_TIME
? ? ? ? });?
? ? ? ? driving.search(new AMap.LngLat(116.322056,39.89491), new AMap.LngLat(116.352994,39.945261));
? ? ? ? AMap.event.addListener(driving,'complete',function(e){
? ? ? ? ? ? var a=e.routes[0].steps;? ? ? ?
? ? ? ? ? ? addMarker(a[0].path[0]);
? ? ? ?for(var i=0;i<a.length;i++){?
? ? ? ? ? ? var b=document.getElementById('id').innerHTML+=a[i].instruction+'<br>';
? ? ? ? ? ? drawLine(a[i].path,map);
? ? ? ?}
? ? ? ?map.setZoom(12);
? ? ? ? });
? ? });
? ? function addMarker(position){
? ? ? ? var mk=new AMap.Marker({
? ? ? ? ? ? map:map,
? ? ? ? ? ? position:position? ??
? ? ? ? });
? ? }
? ? function drawLine(data,map){
? ? ? ? var polyline=new AMap.Polyline({
? ? ? ? ? ? map:map,
? ? ? ? ? ? path:data,? ? ? ? ? ?
? ? ? ? ? ? strokeColor: 'red',?
? ? ? ? ? ? strokeOpacity:0.9,
? ? ? ? ? ? strokeWeight:4,
? ? ? ? ? ? strokeDasharray:[10,5]
? ? ? ? });
? ? }
</script>
</body>
</html>
------------------------------------------------
可以實現(xiàn)的,代碼如上,要自己寫自己的KEY
2015-11-04
其他同學有跟我一樣的嗎?是我瀏覽器插件不足嗎?