转载请注明地址：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>

     <!-- ak="xxx",xxx为百度地图秘钥，使用1.5及以上版本需申请 -->

     <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()); //公交线路查询

                     }

                 }

             }

         }

     }

 }

此地图并不是很完善，比如起点终点marker样式相同，未进行区分。之后会继续完善%>_<%

最后照例上一张测试图：

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

基于百度地图api + AngularJS 的入门地图的更多相关文章

  1. Google 地图 API V3 使用入门

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  2. 【百度地图API】如何自定义地图图层？实例：制作麻点图（自定义图层+热区）

    原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...

  3. 【百度地图API】如何利用地图API制作汽车沿道路行驶的动画？——如何获得道路层数据

    原文:[百度地图API]如何利用地图API制作汽车沿道路行驶的动画?--如何获得道路层数据 有几个做汽车导航的朋友问我说,他们想在地图上制作一辆车沿着道路行驶的动画.可是,百度地图的道路数据并没有公开 ...

  4. 【百度地图API】如何在地图上添加标注？——另有：坐标拾取工具+打车费用接口介绍

    原文:[百度地图API]如何在地图上添加标注?--另有:坐标拾取工具+打车费用接口介绍 摘要: 在这篇文章中,你将学会,如何利用百度地图API进行标注.如何使用API新增的打车费用接口. ------ ...

  5. 【百度地图API】多家地图API文件大小对比

    原文:[百度地图API]多家地图API文件大小对比 于2011.6.9日更新百度地图API文件大小.同时更新图片. 任务描述: 明天就是元宵佳节啦~这是一个团团圆圆的节日,于是,再次想把各家API聚在 ...

  6. 【百度地图API】多家地图API内存消耗对比测验（带源码）

    原文:[百度地图API]多家地图API内存消耗对比测验(带源码) 任务描述: 啊,美妙的春节结束了.酸奶小妹和妈妈的山西平遥之旅也宣告成功!距离平遥古城7km,有一个同样身为“世界文化遗产”的寺庙,叫 ...

  7. 百度地图api通过地址显示地图，白名单

    百度地图api通过地址显示地图,白名单 http://developer.baidu.com/map/jsdemo.htm#i7_1?qq-pf-to=pcqq.c2c---------------- ...

  8. [转]百度地图API详解之地图坐标系统

    博客原文地址:http://www.jiazhengblog.com/blog/2011/07/02/289/ 我们都知道地球是圆的,电脑显示器是平的,要想让位于球面的形状显示在平面的显示器上就必然需 ...

  9. PHP:基于百度大脑api实现OCR文字识别

    有个项目要用到文字识别,网上找了很多资料,效果不是很好,偶然的机会,接触到百度大脑.百度大脑提供了很多解决方案,其中一个就是文字识别,百度提供了三种文字识别,分别是银行卡识别.身份证识别和通用文字识别 ...

随机推荐

  1. Apache服务无法启动的解决方法

    apache服务无法启动的解决方法 在配置apache的时候,把apache安装为服务myweb,用apacheMonitor启动myweb发现无法启动,提示:the requested operat ...

  2. QTreeView处理大量数据（使用1000万条数据，每次都只是部分刷新）

    如何使QTreeView快速显示1000万条数据,并且内存占用量少呢?这个问题困扰我很久,在网上找了好多相关资料,都没有找到合理的解决方案,今天在这里把我的解决方案提供给朋友们,供大家相互学习. 我开 ...

  3. Spring Boot的一个测试用例

    package tk.mybatis.springboot.mapper; import org.junit.Assert; import org.junit.Test; import org.jun ...

  4. java课程设计（计算器）

    JAVA课程 设 计 报 告 1206401-18   瞿杰 一.设计时间 2013年6月 24日-----6月28日 二.设计地点 湖南城市学院实验楼计算机506机房 三.设计目的 1.巩固学习VB ...

  5. poj1637Sightseeing tour(混合图欧拉回路)

    题目请戳这里 题目大意:求混合图欧拉回路. 题目分析:最大流.竟然用网络流求混合图的欧拉回路,涨姿势了啊啊.. 其实仔细一想也是那么回事.欧拉回路是遍历所有边一次又回到起点的回路.双向图只要每个点度数 ...

  6. linux 使用ssh到远端并且使用while的坑

    如果要使用ssh批量登录到其它系统上操作时,我们会采用循环的方式去处理,那么这里存在一个巨大坑,你必须要小心了. 现在是想用一个脚本获取远程服务器端/root下面的文件: #!/bin/bash ca ...

  7. jade初学

    jade是一个比ejs略难得模板.express的默认模本就是jade. 今天看了一下其实不是太难~~ 笔记: jade中使用缩进来定义HTML文档的层次结构 jade不需要关闭标签 给div添加id ...

  8. 关于javascript面向对象之闭包

    要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量,而在函数外部无法 ...

  9. 文件上传功能 -- jquery.form.js/springmvc

    距离上一篇 文件上传下载样式 -- bootstrap(http://www.cnblogs.com/thomascui/p/5370947.html)已经三周时间了,期间一直考虑怎么样给大家提交一篇 ...

  10. webform 不实用office控件导出excel StringBuilder 类型拼接字符串表格导出excel

    StringBuilder sb = new StringBuilder(); sb.AppendLine("<meta http-equiv=\"Content-Type\ ...