Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

add bmap transit

  • Loading branch information...
commit c46e7df27bc374e20f0363467d7b26fe43091353 1 parent 9fb3045
@spemoon authored
View
46 js/app/bmap.js
@@ -24,41 +24,37 @@
node: 'map2'
});
}
- map2.create().search(address, function() {
- var _this = this;
- this.infoWindow('<a title="选定该地址" class="b-3" id="select" href="#" data-action="selectLocation">选定该地址</a>', function(data) {
- $('#select').click(function() {
- if (_this.markerPoint) {
- console.log(_this.markerPoint);
- var point = _this.markerPoint.getPosition();
- _this.getArea(point, {
- success: function(results) {
- document.getElementById('address').value = results.address;
- }
- });
- }
- });
- });
- });
+ /*map2.create().search(address, function(data) {*/
+ //var _this = this;
+ //this.infoWindow('<p>' + data + '</p><a title="选定该地址" class="b-3" id="select" href="#" data-action="selectLocation">选定该地址</a>', function(data) {
+ //$('#select').click(function() {
+ //if (_this.markerPoint) {
+ //var point = _this.markerPoint.getPosition();
+ //_this.getArea(point, {
+ //success: function(results) {
+ //document.getElementById('address').value = results.address;
+ //}
+ //});
+ //}
+ //});
+ //});
+ /*});*/
if (!map3) {
map3 = new baiduMap({
- node: 'map3'
+ node: 'map3',
+ markPosition: 'transit'
});
}
- map3.create().search(address, function() {
+ map3.create().search(address, function(data) {
var _this = this;
- this.infoWindow('<p>起点:</p><input id="direction" data-action="from" name="" type="text" /><p><input type="button" data-action="go" id="go" value="去这里" /></p>', function() {
+ this.infoWindow('<p>' + data + '</p><p>起点:</p><input id="direction" data-action="from" name="" type="text" /><p><input type="button" data-action="go" id="go" value="去这里" /></p>', function() {
$('#go').click(function() {
var direction = $('#direction').val();
if (_this.markerPoint) {
var point = _this.markerPoint.getPosition();
+ console.log(point);
_this.transit(point, {
- renderOptions: {
- panel: 'directions'
- },
- onSearchComplete: function(){
- console.log("onSearchComplete");
- }
+ renderTo: 'directions'
}, direction);
}
/*var point = _this.markerPoint.getPosition();*/
View
197 js/lib/map/bmap.js
@@ -28,6 +28,7 @@
* lng:{Number} 可选,经度
* mapType:{String} 可选,地图类型
* zoom:{Number} 可选,地图缩放比例
+ * markPosition:{Boolean} 可选,识别是哪种地图,true表示选地址地图
*/
var baiduMap = function(params) {
this.node = typeof params.node == 'string' ? document.getElementById(params.node) : params.node;
@@ -41,6 +42,7 @@
this.mapType = params.mapType || config.map.type;
this.zoom = params.zoom || config.map.zoom;
this.localCityName = params.localCityName || returnCitySN.cname || '福州市';
+ this.markPosition = params.markPosition || 'select';
};
/**
* 静态方法:载入脚本
@@ -122,31 +124,98 @@
search: function(address, callback) {
if (address && this.map) {
this.map.clearOverlays();
- if (!this.geocoder) {
- this.geocoder = new BMap.Geocoder();
- }
+ /*if (!this.geocoder) {*/
+ //this.geocoder = new BMap.Geocoder();
+ //}
+ //var _this = this;
+ //this.searching = true;
+ //this.geocoder.getPoint(address, function(point){
+ //if (!point) {
+ //alert("没有搜索到您需要的地址");
+ //return;
+ //}
+ //_this.geocoder.getLocation(point, function(results) {
+ //if(results === null){
+ //alert("在前面加上城市会搜得更准哦");
+ //return;
+ //}
+ //_this.marker(results.point, {
+ //enableDragging: true,
+ //callback: function() {
+ //callback && callback.call(_this);
+ //}
+ //});
+ //});
+ /*}, _this.localCityName);*/
var _this = this;
- this.searching = true;
- this.geocoder.getPoint(address, function(point){
- if (!point) {
- alert("没有搜索到您需要的地址");
- return;
- }
- _this.geocoder.getLocation(point, function(results) {
- if(results === null){
- alert("在前面加上城市会搜得更准哦");
- return;
- }
- _this.marker(results.point, {
+ if (!this.localSearch) {
+ this.localSearch = new BMap.LocalSearch(address);
+ }
+ this.localSearch.search(address);
+ this.localSearch.setSearchCompleteCallback(function(results) {
+ _this.searchComplete(results, callback);
+ });
+ }
+ return this;
+ },
+ searchComplete: function(results, callback) {
+ var num = results.getNumPois();
+ if (num > 10) {
+ num = 10;
+ }
+ var _this = this;
+ for(var i = 0; i < num; i++){
+ var point = results.getPoi(i).point;
+ var title = results.getPoi(i).title;
+ (function(i) {
+ var address = results.getPoi(i).address;
+ var marker = '';
+ if (i === 0) {
+ marker = _this.marker(point, {
enableDragging: true,
+ title: title,
callback: function() {
- callback && callback.call(_this);
+ callback && callback.call(_this, address);
}
+ });
+ } else {
+ marker = _this.marker(point, {
+ enableDragging: true,
+ title: title
});
- });
- }, _this.localCityName);
+ }
+ marker.setAnimation(BMAP_ANIMATION_DROP);
+ function infoWinDrag (callback) {
+ point = marker.getPosition();
+ _this.markerPoint = marker;
+ _this.getArea(point, {
+ success: function(results) {
+ callback && callback.call(_this, results.address);
+ }
+ });
+ }
+ if (_this.markPosition === 'select') {
+ function selectDrag(address) {
+ var html = '<p>' + address + '</p><a title="选定该地址" class="b-3" id="select" href="#" data-action="selectLocation">选定该地址</a>';
+ _this.infoWindow(html, function(data) {});
+ $('#select').click(function() {
+ document.getElementById('address').value = address;
+ });
+ }
+ marker.addEventListener('dragend', function(e) {infoWinDrag(selectDrag)});
+ marker.addEventListener('click', function(e) {infoWinDrag(selectDrag)});
+
+ } else if (_this.markPosition === 'transit'){
+ function transitDrag(address) {
+ var html = '<p>' + address + '</p><p>起点:</p><input id="direction" data-action="from" name="" type="text" /><p><input type="button" data-action="go" id="go" value="去这里" /></p>'
+ _this.infoWindow(html, function() {});
+ }
+ marker.addEventListener('click', function(e) {infoWinDrag(transitDrag)});
+ marker.addEventListener('dragend', function(e) {infoWinDrag(transitDrag)});
+ }
+
+ })(i);
}
- return this;
},
/**
* 标识marker
@@ -156,17 +225,17 @@
*/
marker: function(point, params) {
if (this.map) {
+ var _this = this;
params = params || {};
this.markerPoint = new BMap.Marker(point, {
- enableDragging: params.enableDragging
+ enableDragging: params.enableDragging || false,
+ title: params.title || '',
+ icon: new BMap.Icon('themes/images/map/marker.png', new BMap.Size(32, 32))
});
this.map.addOverlay(this.markerPoint);
- if (params.center !== false) { // 默认居中
- this.map.centerAndZoom(point, this.zoom);
- }
params.callback && params.callback.call(this); // 回调
}
- return this;
+ return this.markerPoint;
},
/**
* 针对marker设置一个infoWindow
@@ -181,9 +250,7 @@
this.infoWin = new BMap.InfoWindow(content);
}
this.markerPoint.openInfoWindow(this.infoWin);
- this.markerPoint.addEventListener('click', function(e) {
- _this.markerPoint.openInfoWindow(_this.infoWin);
- });
+
this.infoWin.addEventListener('open', function(e) {
callback && callback.call(this, e);
});
@@ -218,11 +285,81 @@
*/
transit: function(location, params, direction) {
if (location) {
+ var _this = this;
if (!this.transitRoute) {
- this.transitRoute = new BMap.TransitRoute(location, params);
+ this.transitRoute = new BMap.TransitRoute(location);
+ }
+ this.transitRoute.search(direction, location);
+ this.transitRoute.setSearchCompleteCallback(function(results) {
+ _this.transitCompleteCallback(results, params.renderTo);
+ });
+ }
+ },
+ transitCompleteCallback: function(results, renderTo) {
+ // 从结果对象中获取起点和终点信息
+ var start = results.getStart();
+ var end = results.getEnd();
+ this.addStart(start.point, start.title);
+ this.addEnd(end.point, end.title);
+ console.log(results.getPlan(0));
+ // 直接获取第一个方案
+ var plan = results.getPlan(0);
+ // 遍历所有步行线路
+ for (var i = 0; i < plan.getNumRoutes(); i++) {
+ if (plan.getRoute(i).getDistance(false) > 0) {
+ // 判断只有大于0的步行线路才会绘制
+ this.addWalkRoute(plan.getRoute(i).getPath());
}
- this.transitRoute.search(location, direction);
- //console.log(this.transitRoute.getResults());
+ }
+ // 遍历所有公交线路
+ var allLinePath = [];
+ for (i = 0; i < plan.getNumLines(); i++) {
+ allLinePath = allLinePath.concat(plan.getLine(i).getPath());
+ this.addLine(plan.getLine(i).getPath());
+ }
+ // 最后根据公交线路的点设置地图视野
+ this.map.setViewport(allLinePath);
+ },
+ addStart: function(point, title) {
+ if (this.map) {
+ this.map.addOverlay(new BMap.Marker(point, {
+ title: title,
+ enableDragging: true,
+ icon: new BMap.Icon('themes/images/map/dest_markers.png', new BMap.Size(39, 33)),
+ offset: new BMap.Size(10, -20)
+ }));
+ }
+ },
+ addEnd: function(point, title) {
+ if (this.map) {
+ this.map.addOverlay(new BMap.Marker(point, {
+ title: title,
+ icon: new BMap.Icon('themes/images/map/dest-markers.png', new BMap.Size(33, 39), {
+ imageOffset: new BMap.Size(0, 34)
+ })
+ }));
+ }
+ },
+ addWalkRoute: function(path) {
+ if (this.map) {
+ this.map.addOverlay(new BMap.Polyline(path, {
+ strokeColor: 'black',
+ strokeOpacity: 0.7,
+ strokeWeight: 4,
+ strokeStyle: 'dashed',
+ enableClicking: false
+ }));
+ }
+ },
+ addLine: function(path) {
+ if (this.map) {
+ this.map.addOverlay(new BMap.Polyline(path, {
+ strokeColor: 'blue',
+ strokeOpacity: 0.6,
+ strokeWeight: 5,
+ enableClicking: false
+ }));
+
}
}
};
View
7 themes/images/map/dest_markers.mkm
@@ -0,0 +1,7 @@
+<MKM version="2.0" imageFileUrl="file:///D:/LD/wamp/www/spemoon_git_project/map/themes/images/map/dest_markers.png">
+ <Marks>
+ <LengthMark direction="3" color="16711680" length="33" x="22" y="0"/>
+ <LengthMark direction="12" color="16711680" length="39" x="0" y="22"/>
+ <LengthMark direction="3" color="16711680" length="34" x="1" y="1"/>
+ </Marks>
+</MKM>
View
BIN  themes/images/map/dest_markers.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  themes/images/map/marker.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Please sign in to comment.
Something went wrong with that request. Please try again.