基于百度地图api + AngularJS 的入门地图

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

转载请注明地址：http://www.cnblogs.com/enzozo/p/4368081.html

简介：

此入门地图为简易的“广州大学城”公交寻路地图，采用很少量的AngularJS进行input的交互，绝大部分基于百度地图API。

正文：

index.html:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 <link rel="stylesheet" type="text/css" href="index.css"> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=91bc04aac3d665927d8c64750da556a9"></script>
 <title>广州大学城寻路</title> <script type="text/javascript" src="angular.min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
 <script type="text/javascript" src="myControl.js"></script>
</head>
<body>
<div id="left">
<div id="search" ng-app="" ng-controller="myCtrl">
起点：<input type="text" ng-model="init" required><br>
终点：<input type="text" ng-model="ended" required><br>
<button ng-click="go()" style="position:absolute; top:20px; left:250px; z-Index:99; padding:5px">查询</button>
</div>
<br>
<div id="r-result"></div>
</div>
<div id="l-map"></div>
</body>
</html>

index.css:

body, html {
width: 100%;
height: 100%;
margin:;
font-family:"Microsoft Yahei";
} #l-map {
height:100%;
width:75%;
} #left {
height: 100%;
width: 24.5%;
float:left;
overflow: hidden;
border-right-style: groove;
} #search {
padding: 10px;
}

注：设置路线显示栏及input位于左侧，地图位于右侧。

myControl.js:

var map;
window.onload = function() {
// 百度地图API
map = new BMap.Map("l-map", {minZoom:15}); //初始化地图，规定最小缩放
map.centerAndZoom(new BMap.Point(113.402364,23.056676), 16); //显示中心
map.enableScrollWheelZoom(); //启用滚轮缩放 var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL});//右上角平移和缩放按钮
map.addControl(top_right_navigation);
/* 由于设置了地图边界，即拖拽地图至超出“大学城”范围时地图会自动弹回，所以使用平移按钮时它可能会出现自己和自己较劲儿的现象 */ var b = new BMap.Bounds(new BMap.Point(113.363465,23.033239),new BMap.Point(113.42225,23.081655));
try {
BMapLib.AreaRestriction.setBounds(map, b); //设置边界
} catch (e) {
alert(e);
}
}; function myCtrl($scope){
$scope.go = function() {
document.getElementById('r-result').innerHTML = '';
map.clearOverlays(); //清空地图所有标注 var local = new BMap.LocalSearch(map, {
renderOptions:{
map: map,
panel: "results"
}
}); var b = new BMap.Bounds(new BMap.Point(113.363465,23.033239),new BMap.Point(113.42225,23.081655));
BMapLib.AreaRestriction.setBounds(map, b); var s_marker = null; //起点marker
var e_marker = null; //终点marker local.searchInBounds($scope.init, map.getBounds()); //在“大学城”范围内进行搜索
local.setMarkersSetCallback(function (pois) { //插入marker的回调函数
for(var i = 0; i < pois.length; i++){
var marker = pois[i].marker;
marker.addEventListener("click", function(){ //添加监听事件
marker_trick = true;
var pos = this.getPosition();
setAdress_s(pos.lng, pos.lat);
});
}
}) function setAdress_s(s_lng, s_lat) {
if (confirm("设为起点？")) {
map.clearOverlays();
s_marker = new BMap.Marker(new BMap.Point(s_lng, s_lat));
map.addOverlay(s_marker); //创建标注 local.searchInBounds($scope.ended, map.getBounds());
local.setMarkersSetCallback(function (pois) {
//此函数写在setAdress_s里面保证先设置了起点后再设置终点
for(var i = 0; i < pois.length; i++){
var e_marker = pois[i].marker;
e_marker.addEventListener("click", function(){
marker_trick = true;
var pos = this.getPosition();
setAdress_e(pos.lng, pos.lat);
});
}
}) function setAdress_e(e_lng, e_lat) {
if (confirm("设为终点？")) {
map.clearOverlays();
e_marker = new BMap.Marker(new BMap.Point(e_lng, e_lat));
map.addOverlay(e_marker); var transit = new BMap.TransitRoute(map, {
renderOptions: {
map: map,
panel: "r-result" //将结果显示在$('#r-result')中
}
});
transit.search(s_marker.getPosition(), e_marker.getPosition()); //公交线路查询
}
}
}
} }
}