sencha touch 百度地图扩展(2014-12-17)
上个版本http://www.cnblogs.com/mlzs/p/3666466.html,新增了一些功能,修复了一些bug
扩展代码如下:
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 百度地图扩展(2014-12-17)的更多相关文章
- sencha touch百度地图扩展
扩展代码如下: Ext.define('ux.BMap', { alternateClassName: 'bMap', extend: 'Ext.Container', xtype: 'bMap', ...
- 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 ...
- (转)Sencha Touch和jQuery Mobile的比较
原文:http://extjs.org.cn/node/664 Sencha Touch和jQuery Mobile的比较 Posted 周三, 08/07/2013 - 10:07 by admin ...
- 百度地图结合echarts并添加行政区块
作者:LJaer链接:https://www.zhihu.com/question/49251513/answer/125728764来源:知乎<!DOCTYPE html> <ht ...
- MVC项目中使用百度地图
已经很久没更新博客了,因为最近一直在学习前端的知识,没那么多时间,写博客或者写文章不但没有钱,写得好还好说,如果写得不好,一些吃瓜群众,不仅要喷你,搞不好还要人身攻击就不好了.所以写博客的人,脸皮得厚 ...
随机推荐
- anaconda3/lib/libcrypto.so.1.0.0: no version information available (required by wget)
Solution: sudo ldconfig /lib/x86_64-linux-gnu/ #you need to use the libcrypto.so from /lib/x86_64-li ...
- 后台任务hangfire
Installation¶ There are a couple of packages for Hangfire available on NuGet. To install Hangfire in ...
- Spark机器学习(9):FPGrowth算法
关联规则挖掘最典型的例子是购物篮分析,通过分析可以知道哪些商品经常被一起购买,从而可以改进商品货架的布局. 1. 基本概念 首先,介绍一些基本概念. (1) 关联规则:用于表示数据内隐含的关联性,一般 ...
- iOS开源项目之日志框架CocoaLumberjack
CocoaLumberjack是Mac和iOS上一个集快捷.简单.强大和灵活于一身的日志框架.CocoaLumberjack类似于流行的日志框架(如log4j),但它是专为Objective-C设计的 ...
- 【C#】详解C#事件
目录结构: contents structure [+] 事件基本介绍 定义事件类型 定义事件成员 定义引发事件的方法 以线程安全的方式引发事件 登记事件关注 揭秘事件 显式实现事件 为什么需要显式实 ...
- js 学习
{% load static %} <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- java File.separator 简介
在Windows下的路径分隔符和Linux下的路径分隔符是不一样的,当直接使用绝对路径时,跨平台会暴出“No such file or diretory”的异常. 比如说要在temp目录下建立一个te ...
- C# 创建 读取 更新 XML文件
public static class XmlHelper { /// <summary> /// 读取节点值 /// </summary> /// <param nam ...
- 常见Python爬虫工具总结
常见Python爬虫工具总结 前言 以前写爬虫都是用requests包,虽然很好用,不过还是要封装一些header啊什么的,也没有用过无头浏览器,今天偶然接触了一下. 原因是在处理一个错误的时候,用到 ...
- 【GMT43智能液晶模块】例程一:ARM驱动LED
实验原理: 通过STM32的一个GPIO驱动一个红色LED,GPIO为推挽输出模式,采用灌电流 方式与LED连接,基于STemWin人机界面通过按钮控制GPIO高.低电平输出,从而 控制LED亮灭. ...