基于百度地图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>
<!-- 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 的入门地图的更多相关文章
- Google 地图 API V3 使用入门
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- 【百度地图API】如何自定义地图图层？实例：制作麻点图（自定义图层+热区）
原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...
- 【百度地图API】如何利用地图API制作汽车沿道路行驶的动画？——如何获得道路层数据
原文:[百度地图API]如何利用地图API制作汽车沿道路行驶的动画?--如何获得道路层数据 有几个做汽车导航的朋友问我说,他们想在地图上制作一辆车沿着道路行驶的动画.可是,百度地图的道路数据并没有公开 ...
- 【百度地图API】如何在地图上添加标注？——另有：坐标拾取工具+打车费用接口介绍
原文:[百度地图API]如何在地图上添加标注?--另有:坐标拾取工具+打车费用接口介绍 摘要: 在这篇文章中,你将学会,如何利用百度地图API进行标注.如何使用API新增的打车费用接口. ------ ...
- 【百度地图API】多家地图API文件大小对比
原文:[百度地图API]多家地图API文件大小对比 于2011.6.9日更新百度地图API文件大小.同时更新图片. 任务描述: 明天就是元宵佳节啦~这是一个团团圆圆的节日,于是,再次想把各家API聚在 ...
- 【百度地图API】多家地图API内存消耗对比测验（带源码）
原文:[百度地图API]多家地图API内存消耗对比测验(带源码) 任务描述: 啊,美妙的春节结束了.酸奶小妹和妈妈的山西平遥之旅也宣告成功!距离平遥古城7km,有一个同样身为“世界文化遗产”的寺庙,叫 ...
- 百度地图api通过地址显示地图，白名单
百度地图api通过地址显示地图,白名单 http://developer.baidu.com/map/jsdemo.htm#i7_1?qq-pf-to=pcqq.c2c---------------- ...
- [转]百度地图API详解之地图坐标系统
博客原文地址:http://www.jiazhengblog.com/blog/2011/07/02/289/ 我们都知道地球是圆的,电脑显示器是平的,要想让位于球面的形状显示在平面的显示器上就必然需 ...
- PHP:基于百度大脑api实现OCR文字识别
有个项目要用到文字识别,网上找了很多资料,效果不是很好,偶然的机会,接触到百度大脑.百度大脑提供了很多解决方案,其中一个就是文字识别,百度提供了三种文字识别,分别是银行卡识别.身份证识别和通用文字识别 ...
随机推荐
- iOS 相关职位要求整理版
在拉勾上找了20家,BOSS直聘找了10家感兴趣的在招聘 iOS 程序员的公司,把职位要求整理了一下. 初创公司一般要求1年以上开发经验,成长型或者成熟型公司一般要求最低2年以上开发经验.这里针对的是 ...
- POJ 3061 Subsequence（Two Pointers）
[题目链接] http://poj.org/problem?id=3061 [题目大意] 给出S和一个长度为n的数列,问最短大于等于S的子区间的长度. [题解] 利用双指针获取每一个恰好大于等于S的子 ...
- delphi ICS控件示例解读
{* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Author: Fran鏾is PIETTE ...
- 数据库 BUG：Illegal mix of collations (utf8_unicode_ci,IMPLICIT) and (utf8_general_ci,IMPLICIT) for operation '=
在mysql5中遇到的问题: Illegal mix of collations (utf8_general_ci,IMPLICIT) and (utf8_unicode_ci,IMPLICIT) f ...
- JQuery DOM HighLighter (it's a basic "Inspect element" simple implementation to mimic what webkit inspector and firebug do)
JQuery DOM HighLighter (it's a basic "Inspect element" simple implementation to mimic what ...
- android UI跨线程操作
android应用程序也是单线程程序,主线程为UI线程. android 线程是非安全的,即不要在子线程中更新 UI. public class MasterActivity extends Acti ...
- sql 月初和月末
--月初 select convert(varchar(10),dateadd(day,-(day(getdate()) -1),getdate()) ,120) --月末select conve ...
- 解决 Tomcat reload WARNING [localhost-startStop-2] org.apache.catalina.loader.WebappClassLoaderBase.clearReferencesJdbc The web application [] registered the JDBC driver [com.mysql.jdbc.Driver] but fail
转自:http://www.cnblogs.com/interdrp/p/5632529.html 我的错误如下: 06-Sep-2016 18:57:10.595 WARNING [localhos ...
- BZOJ 3612: [Heoi2014]平衡( dp )
枚举Fl, 就变成一个整数划分的问题了...f(i,j) = f(i-j,j-1)+f(i-j,j)-f(i-N-1,j-1)递推.f(i,j)表示数i由j个不同的数组成,且最大不超过N的方案数 -- ...
- mysql修改用户名和密码
修改用户名 mysql> use mysql; 选择数据库Database changedmysql> update user set user="dns" wher ...