基於百度地圖api + AngularJS 的入門地圖

時間 2019-11-21

標籤基於百度地圖 api angularjs 入門欄目 AngularJS 简体版

原文原文鏈接

轉載請註明地址：http://www.cnblogs.com/enzozo/p/4368081.htmljavascript

簡介：css

此入門地圖爲簡易的「廣州大學城」公交尋路地圖，採用不多量的AngularJS進行input的交互，絕大部分基於百度地圖API。html

正文：java

index.html:api

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 
 6     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
 7     <!-- 使在移動設備上有較好顯示 -->
 8 
 9     <link rel="stylesheet" type="text/css" href="index.css">
10 
11     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=91bc04aac3d665927d8c64750da556a9"></script>
12     <!-- ak="xxx",xxx爲百度地圖祕鑰，使用1.5及以上版本需申請 -->
13 
14     <title>廣州大學城尋路</title>
15 
16     <script type="text/javascript" src="angular.min.js"></script>
17 
18     <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
19     <!-- 用於設置地圖顯示範圍 -->
20 
21     <script type="text/javascript" src="myControl.js"></script>
22 </head>
23 <body>
24     <div id="left">
25         <div id="search" ng-app="" ng-controller="myCtrl">
26             起點：<input type="text" ng-model="init" required><br>
27             終點：<input type="text" ng-model="ended" required><br>
28             <button ng-click="go()" style="position:absolute; top:20px; left:250px; z-Index:99; padding:5px">查詢</button>
29         </div>
30         <br>
31         <div id="r-result"></div>
32     </div>
33     <div id="l-map"></div>
34 </body>
35 </html>

index.css:app

 1 body, html {
 2     width: 100%;
 3     height: 100%;
 4     margin:0;
 5     font-family:"Microsoft Yahei";
 6 }
 7 
 8 #l-map {
 9     height:100%;
10     width:75%;
11 }
12 
13 #left {
14     height: 100%;
15     width: 24.5%;
16     float:left;
17     overflow: hidden;
18     border-right-style: groove;
19 }
20 
21 #search {
22     padding: 10px;
23 }

注：設置路線顯示欄及input位於左側，地圖位於右側。函數

myControl.js:測試

 1 var map;
 2 window.onload = function() {
 3     // 百度地圖API
 4     map = new BMap.Map("l-map", {minZoom:15}); //初始化地圖，規定最小縮放
 5     map.centerAndZoom(new BMap.Point(113.402364,23.056676), 16); //顯示中心
 6     map.enableScrollWheelZoom(); //啓用滾輪縮放
 7 
 8     var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL});//右上角平移和縮放按鈕
 9     map.addControl(top_right_navigation);    
10     /* 因爲設置了地圖邊界，即拖拽地圖至超出「大學城」範圍時地圖會自動彈回，因此使用平移按鈕時它可能會出現本身和本身較勁兒的現象 */
11 
12     var b = new BMap.Bounds(new BMap.Point(113.363465,23.033239),new BMap.Point(113.42225,23.081655)); 
13     try {    
14         BMapLib.AreaRestriction.setBounds(map, b); //設置邊界
15     } catch (e) {
16         alert(e);
17     }
18 };
19 
20 function myCtrl($scope){
21     $scope.go = function() {
22         document.getElementById('r-result').innerHTML = '';
23         map.clearOverlays(); //清空地圖全部標註
24 
25         var local = new BMap.LocalSearch(map, {
26               renderOptions:{
27                   map: map,
28                   panel: "results"
29               }
30         });
31 
32         var b = new BMap.Bounds(new BMap.Point(113.363465,23.033239),new BMap.Point(113.42225,23.081655));
33         BMapLib.AreaRestriction.setBounds(map, b);
34 
35         var s_marker = null; //起點marker
36         var e_marker = null; //終點marker
37 
38         local.searchInBounds($scope.init, map.getBounds()); //在「大學城」範圍內進行搜索
39         local.setMarkersSetCallback(function (pois) { //插入marker的回調函數
40             for(var i = 0; i < pois.length; i++){
41                 var marker = pois[i].marker;  
42                 marker.addEventListener("click", function(){ //添加監聽事件
43                     marker_trick = true;  
44                     var pos = this.getPosition();  
45                     setAdress_s(pos.lng, pos.lat);  
46                 });  
47             }
48         })
49         
50         function setAdress_s(s_lng, s_lat) {
51             if (confirm("設爲起點？")) {
52                 map.clearOverlays();
53                 s_marker = new BMap.Marker(new BMap.Point(s_lng, s_lat));
54                 map.addOverlay(s_marker); //建立標註
55 
56                 local.searchInBounds($scope.ended, map.getBounds());
57                 local.setMarkersSetCallback(function (pois) { 
58                     //此函數寫在setAdress_s裏面保證先設置了起點後再設置終點
59                     for(var i = 0; i < pois.length; i++){
60                         var e_marker = pois[i].marker;  
61                         e_marker.addEventListener("click", function(){  
62                             marker_trick = true;  
63                             var pos = this.getPosition();  
64                             setAdress_e(pos.lng, pos.lat);  
65                         });  
66                     }
67                 })
68 
69                 function setAdress_e(e_lng, e_lat) {
70                     if (confirm("設爲終點？")) {
71                         map.clearOverlays();
72                         e_marker = new BMap.Marker(new BMap.Point(e_lng, e_lat));
73                         map.addOverlay(e_marker);
74 
75                         var transit = new BMap.TransitRoute(map, {
76                             renderOptions: {
77                                 map: map, 
78                                 panel: "r-result" //將結果顯示在$('#r-result')中
79                             }
80                         });
81                         transit.search(s_marker.getPosition(), e_marker.getPosition()); //公交線路查詢
82                     }
83                 }
84             }
85         }
86         
87     }
88 }