sencha touch百度地图扩展
扩展代码如下:
Ext.define('ux.BMap', {
alternateClassName: 'bMap',
extend: 'Ext.Container',
xtype: 'bMap',
requires: ['Ext.util.Geolocation'],
config: {
//私有变量,地图对象
map: null,
/// <summary>
/// 地图初始化配置
/// </summary>
/// <param name="locate">是否加载定位控件</param>
mapOptions: {},
//初始配置
//中心点,可以是城市名称,也可以是{lng:'',lat:''}格式的坐标数据
center: '北京',
//是否监听标点的点击事件
markerTap: false,
//私有变量,定位按钮
locate: null,
//私有变量,定位控件
geo: null,
//注意,填充数据需要在showMap事件触发之后才可以
//store数据源lng,lat这两个字段必须有
store: null,
//data数据源,格式为[{lng:'',lat:''}]
data: null,
//百度服务密钥,没有的话不会进行坐标转换,定位会有一定的误差参考http://developer.baidu.com/map/changeposition.htm
ak: null,
//lng坐标name
lngName: 'lng',
//lat坐标name
latName: 'lat',
//本地搜素关键词
key: null,
//根据地址直接解析坐标,可以是单个地址,也可以是[{address:'地址'}]数组,可以有其他参数
address: null
},
//初始化
initialize: function () {
var me = this;
me.callParent();
//视图绘制完成后再加载百度地图,以免地图加载出错
me.on({
painted: 'initMap',
scope: me
});
},
//初始化地图
initMap: function () {
var me = this,
map = me.getMap();
if (!map) {
//初始化地图
//获取地图初始化配置
var mapOptions = me.getMapOptions(),
//获取中心点
center = me.getCenter(),
//获取搜索key
key = me.getKey(),
//获取地址
address = me.getAddress(),
//获取数据源
store=me.getStore(),
point;
//创建地图
map = new BMap.Map(me.element.dom);
//获取中心点
if (Ext.isString(center)) {
point = center;
} else if (Ext.isObject(center)) {
point = BMap.Point(center.lng, center.lat);
}
//设置中心点和地图显示级别
map.centerAndZoom(point, 11);
//添加地图缩放控件
map.addControl(new BMap.ZoomControl());
//判断是否加载定位控件
if (mapOptions.locate) {
//加载定位控件
map.addControl(me.getLocateControl());
}
//设置地图对象,方便在其他地方获取到地图对象
me.setMap(map);
//关键词搜索
if (key) {
me.search(key);
}
//地址解析
if (address) {
me.setMarkerbyAddress(address);
}
//加载store
if (store&&store.getCount()) {
me.onLoad(store);
} //地图加载完毕触发事件
me.fireEvent('showMap', me);
}
},
//数据源事件
storeEventHooks: {
load: 'onLoad'
},
//填充数据
updateData: function (data) {
var me = this,
store = me.getStore();
if (!store) {
me.setStore(Ext.create('Ext.data.Store', {
data: data,
autoDestroy: true
}));
} else {
store.add(data);
}
},
//创建store
applyStore: function (store) {
var me = this,
bindEvents = Ext.apply({},
me.storeEventHooks, {
scope: me
});
//获取store,绑定事件
if (store) {
store = Ext.data.StoreManager.lookup(store);
store.onAfter(bindEvents);
}
return store;
},
//更新store
updateStore: function (newStore, oldStore) {
var me = this,
map = me.getMap(),
bindEvents = Ext.apply({},
me.storeEventHooks, {
scope: me
});
//移除绑定事件,销毁
if (oldStore && Ext.isObject(oldStore) && oldStore.isStore) {
oldStore.un(bindEvents);
if (oldStore.getAutoDestroy()) {
oldStore.destroy();
}
}
if (map && newStore.getCount()) {
me.onLoad(newStore);
}
},
//数据加载成功,加载坐标点
onLoad: function (store) {
var me = this,
map = me.getMap(),
lngName = me.getLngName(),
latName = me.getLatName(),
marker,
item;
map.clearOverlays();
store.each(function (record, index, length) {
item = record.getData();
me.addPoint(item[lngName], item[latName], item, me, map);
});
},
//添加单个点
addPoint: function (lng, lat, item,me, map) {
if (!me) {
me = this;
}
if (!map) {
map = me.getMap();
}
if (lng && lat) {
// 创建标注
var marker = new BMap.Marker(new BMap.Point(lng, lat));
//其他数据
marker.options = {};
//将模型中的其他数据添加到按钮中
for (var name in item) {
marker.options[name] = item[name];
}
if (me.getMarkerTap()) {
//添加点击监听
marker.addEventListener("click",
function (type, target) {
me.fireAction('tapMarker', [me, this], 'onTapMarker');
});
}
// 将标注添加到地图中
map.addOverlay(marker);
}
},
//获取定位控件
getLocateControl: function () {
//创建控件
var locateControl = new BMap.Control();
//设置方位
locateControl.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT;
//设置坐标
locateControl.defaultOffset = new BMap.Size(10, 70);
//设置dom
locateControl.initialize = function (map) {
var zoom = document.createElement("div");
zoom.className = 'BMap_ZoomCtrl zoom_btn locateControl';
var location = document.createElement("div");
location.className = 'location';
zoom.appendChild(location);
map.getContainer().appendChild(zoom);
return zoom;
}
//监听点击事件
this.element.on({
tap: 'onLocate',
delegate: 'div.locateControl',
scope: this
});
return locateControl;
},
//点击定位按钮
onLocate: function (e) {
var el = e.getTarget('div.location', null, true);
el.addCls('locationGif');
this.setLocate(el);
//触发定位事件
this.setGeo(true);
},
//创建定位插件
applyGeo: function (config) {
return Ext.factory(config, Ext.util.Geolocation, this.getGeo());
},
//更新定位插件
updateGeo: function (newGeo, oldGeo) {
var events = {
locationupdate: 'onGeoUpdate',
locationerror: 'onGeoError',
scope: this
}; if (oldGeo) {
oldGeo.un(events);
} if (newGeo) {
newGeo.on(events);
newGeo.updateLocation();
}
},
// 定位成功,设置中心点
onGeoUpdate: function (geo) {
var me = this,
ak = me.getAk();
if (ak) {
Ext.Ajax.request({
url: 'http://api.map.baidu.com/geoconv/v1/?',
params: {
coords: geo.getLongitude() + ',' + geo.getLatitude(),
ak: ak
},
scope: me,
success: function (data) {
data = Ext.decode(data.responseText).result[0];
if (data) {
me.addMyPoint(data.x, data.y);
}
}
});
} else {
me.addMyPoint(geo.getLongitude(), geo.getLatitude());
}
},
//添加我的坐标
addMyPoint: function (lng, lat) {
var me = this,
map = me.getMap(),
icon = new BMap.Icon("resources/icons/markers.png", new BMap.Size(25, 25), {
imageOffset: new BMap.Size(0, 0)
}),
point = new BMap.Point(lng, lat),
marker = new BMap.Marker(point, {
icon: icon
});
// 将标注添加到地图中
map.addOverlay(marker);
map.setCenter(point);
me.unLocate();
},
// 定位失败
onGeoError: function () {
this.unLocate();
//触发事件
this.fireEvent('geoError', this);
},
//取消定位动画
unLocate: function () {
var locate = this.getLocate();
if (locate) {
locate.removeCls('locationGif');
}
},
//更新搜索关键词
updateKey: function (value) {
var me = this,
map = me.getMap();
if (map && value) {
me.search(value);
}
},
/// <summary>
/// 搜索
/// </summary>
/// <param name="key">关键词:String|Array<String></param>
/// <param name="unClear">是否不清除覆盖物</param>
search: function (key, unClear) {
var map = this.getMap(); !unClear && map.clearOverlays();
var local = new BMap.LocalSearch(map, {
renderOptions: {
map: map,
autoViewport: true
}
});
local.setSearchCompleteCallback(function (bo) {
console.log(bo);
if (bo._currentNumPois == 0) {
Ext.toast('请输入正确的检索条件!');
}
});
local.search(key);
},
/// <summary>
/// 根据中心点与检索词发起周边检索
/// </summary>
/// <param name="key">关键词:String|Array<String></param>
/// <param name="by">中心点:LocalResultPoi|String|Point</param>
/// <param name="unClear">是否不清除覆盖物</param>
searchNearby: function (key, by, unClear) {
var map = this.getMap(); !unClear && map.clearOverlays();
var local = new BMap.LocalSearch(map, {
renderOptions: {
map: map,
autoViewport: true
}
});
local.searchNearby(key, by);
},
/// <summary>
/// 设置地图中心
/// </summary>
/// <param name="point"></param>
setMapCenter: function (lng, lat) {
var map = this.getMap();
if (map) {
map.setCenter(new BMap.Point(lng, lat));
}
},
//更新地址
setMarkerbyAddress: function (address) {
var me = this;
if (address) {
if (Ext.isArray(address)) {
for (var i = 0; i < address.length; i++) {
me.getMarkerbyAddress(address[i].address, address[i]);
}
} else if (Ext.isString(address)) {
me.getMarkerbyAddress(address);
}
}
},
//根据地址解析坐标
getMarkerbyAddress: function (address, params) {
var me = this,
ak = me.getAk();
if (ak) {
Ext.Ajax.request({
url: 'http://api.map.baidu.com/geocoder/v2/?',
myParams: params,
params: {
address: address,
ak: ak,
output: 'json'
},
scope: me,
success: function (data) {
var response = Ext.decode(data.responseText),
location;
if (response.status == 0) {
location = response.result.location;
me.addPoint(location.lng, location.lat,data.request.options.myParams);
} else {
if (!params) {
Ext.toast('请输入正确的检索条件!');
}
}
}
});
} else {
Ext.Logger.error('请设置百度服务ak!');
}
}
});
基本用法:
1.引入百度地图JavaScript 极速版
http://api.map.baidu.com/api?type=quick&ak=Y5wTAbhgC4EDVgaBnzCUYO9l&v=1.0
2.在视图中使用,用法类似官方谷歌地图控件
Ext.define('app.view.Map', {
alternateClassName: 'map',
extend: 'ux.BMap',
xtype: 'map',
config: {
title: '地图',
/// <summary>
/// 地图配置
/// </summary>
/// <param name="locate">是否加载定位控件</param>
mapOptions: {
locate: true
},
data: [{ lng: '116.404', lat: '39.915', name: '天安门' }, { lng: '116.1', lat: '39.915', name: '地安门' }],
//是否监听标点的点击事件
markerTap: true
},
//点击坐标处理
onTapMarker: function (me, marker) {
//创建信息窗口
var infoWindow = new BMap.InfoWindow(marker.options.name);
marker.openInfoWindow(infoWindow);
}
});
效果图:
sencha touch百度地图扩展的更多相关文章
- sencha touch 百度地图扩展(2014-12-17)
上个版本http://www.cnblogs.com/mlzs/p/3666466.html,新增了一些功能,修复了一些bug 扩展代码如下: Ext.define('ux.BMap', { alte ...
- sencha touch 百度地图扩展(2014-6-24)(废弃 仅参考)
扩展代码如下: Ext.define('ux.BMap', { alternateClassName: 'bMap', extend: 'Ext.Container', xtype: 'bMap', ...
- EChart系列:在echart3中使用百度地图扩展之后,如何获取到百度地图对象
最近做项目想要在百度地图上叠加显示echart的散点图,然后根据地图的缩放等级和区域范围要显示不同的散点图,这中间折腾了好久.功能要求包括: (1)底图使用百度地图: (2)可以在地图上叠加显示ech ...
- Extjs 百度地图扩展
var bmapps; Bsprint.EditMapInfoWindow = Ext.extend(Ext.Window, { form: null, constructor: function ( ...
- sencha touch 入门系列 扩展篇之sencha touch 项目打包压缩
经常有新手同学抱怨说sencha touch的项目加载速度为什么这么慢,经常要10秒左右的时间甚至更多, 大家都知道,sencha touch开发的项目中引用了大量的js文件,当我们打开项目时,st的 ...
- Sencha Touch 和 jQuery Mobile 的比较
Sencha Touch 和 jQuery Mobile 的比较 英文原文:Sencha Touch vs jQuery Mobile 标签: Sencha Touch jQuery Mobile 1 ...
- 百度地图结合echarts并添加行政区块
作者:LJaer链接:https://www.zhihu.com/question/49251513/answer/125728764来源:知乎<!DOCTYPE html> <ht ...
- (转)Sencha Touch和jQuery Mobile的比较
原文:http://extjs.org.cn/node/664 Sencha Touch和jQuery Mobile的比较 Posted 周三, 08/07/2013 - 10:07 by admin ...
- MVC项目中使用百度地图
已经很久没更新博客了,因为最近一直在学习前端的知识,没那么多时间,写博客或者写文章不但没有钱,写得好还好说,如果写得不好,一些吃瓜群众,不仅要喷你,搞不好还要人身攻击就不好了.所以写博客的人,脸皮得厚 ...
随机推荐
- LEETCODE —— Linked List Cycle [Floyd's cycle-finding algorithm]
Linked List Cycle Given a linked list, determine if it has a cycle in it. Follow up:Can you solve it ...
- js中event.target
event.srcElement从字面上可以看出来有以下关键字:事件,源 他的意思就是:当前事件的源, 我们可以调用他的各种属性 就像:document.getElementById(&quo ...
- PHP-PHP-FPM的max_children一些误区
现在nginx + fpm 基本成为主流的配置,其中我们比较关注的是pm.max_chindren的配置 首先,我们关注一个前提设置: pm = static/dynamic, 这个选项是标识fpm子 ...
- 事件event_scheduler
1.查看事件是否开启 1-1.show variables like 'event_scheduler'; 1-2.select @@event_scheduler; ...
- SerializableDictionary-一个支持序列化与反序列化的Dictionary
使用Dictionary存储的信息在试图序列化为XML保存到文件时,会遇到无法序列化的问题,由于官方Dictionary不支持xml序列化,所以有朋友已经通过实现IXmlSerializable接口, ...
- Ninject使用介绍
#region 第二种写法 /// <summary> /// using(IKernel tKernel=new StandardKernel(new PeoKernelServer() ...
- MyBatis学习(二)、SQL语句映射文件(2)增删改查、参数、缓存
二.SQL语句映射文件(2)增删改查.参数.缓存 2.2 select 一个select 元素非常简单.例如: <!-- 查询学生,根据id --> <select id=" ...
- MyBatis入门学习教程-解决字段名与实体类属性名不相同的冲突
在平时的开发中,我们表中的字段名和表对应实体类的属性名称不一定都是完全相同的,下面来演示一下这种情况下的如何解决字段名与实体类属性名不相同的冲突. 一.准备演示需要使用的表和数据 CREATE TAB ...
- linux中如何启动和关闭svn
1,启动SVN sudo svnserve -d -r /home/data/svn/ 其中 -d 表示守护进程, -r 表示在后台执行 /home/data/svn/ 为svn的安装目录 2,关闭 ...
- ORA-01747: user.table.column, table.column 或列说明无效
Oracle.DataAccess.Client.OracleException ORA-01747: user.table.column, table.column 或列说明无效 原因1: 查了一下 ...