sencha touch 百度地图扩展(2014-6-24)(废弃 仅参考)

扩展代码如下:文章地址https://www.yii666.com/article/754330.html

 Ext.define('ux.BMap', {
alternateClassName: 'bMap',
extend: 'Ext.Container',
xtype: 'bMap',
requires: ['Ext.util.Geolocation'],
config: {
map: null,
/// <summary>
/// 地图初始化配置
/// </summary>
/// <param name="locate">是否加载定位控件</param>
/// <param name="markers">标点集合[{lng:'',lat:''}]</param>
mapOptions: {},
center: '北京',
//是否监听标点的点击事件
markerTap: false,
//私有变量,定位按钮
locate: null,
//定位控件
geo: null,
//注意,填充数据需要在showMap事件触发之后才可以
//store数据源lng,lat这两个字段必须有
store: null,
//data数据源
data: null,
//百度服务密钥,没有的话不会进行坐标转换,定位会有一定的误差参考http://developer.baidu.com/map/changeposition.htm
ak: null
},
initialize: function () {
this.callParent();
this.on({
//有些项目布局可能需要使用painted事件来监听
show: 'initMap',
scope: this
});
},
//数据源事件
storeEventHooks: {
load: 'onLoad'
},
//填充数据
updateData: function (data) {
var me = this,
store = me.getStore();
if (!store) {
this.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,
bindEvents = Ext.apply({},
me.storeEventHooks, {
scope: me
});
//移除绑定事件,销毁
if (oldStore && Ext.isObject(oldStore) && oldStore.isStore) {
oldStore.un(bindEvents);
if (oldStore.getAutoDestroy()) {
oldStore.destroy();
}
}
if (newStore.getCount()) {
me.on({
showMap: function () {
me.onLoad(newStore);
}
});
}
},
//数据加载成功,加载坐标点
onLoad: function (store) {
var me = this,
map = me.getMap(),
marker,
item;
map.clearOverlays(); store.each(function (record, index, length) {
item = record.getData();
if (item.lng && item.lat) {
// 创建标注
marker = new BMap.Marker(new BMap.Point(item.lng, item.lat));
marker.options = {};
for (var name in item) {
if (name != 'lng' && name != 'lat') {
marker.options[name] = item[name];
}
}
if (me.getMarkerTap()) {
//添加点击监听
marker.addEventListener("click",
function (type, target) {
me.fireAction('tapMarker', [me, this], 'onTapMarker');
});
}
// 将标注添加到地图中
map.addOverlay(marker);
}
});
},
initMap: function () {
var me = this,
map = me.getMap();
if (!map) {
//初始化地图
var mapOptions = me.getMapOptions(),
map = new BMap.Map(me.getId()),
center = me.getCenter(),
point;
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 (mapOptions.markers) {
me.setData(mapOptions.markers);
}
//触发事件
me.fireEvent('showMap', me); }
},
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: this,
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 (x,y) {
var me = this,
map = me.getMap(),
icon = new BMap.Icon("resources/icons/markers.png", new BMap.Size(20, 25), {
imageOffset: new BMap.Size(0, 0)
}),
point = new BMap.Point(x,y),
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');
}
},
/// <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.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));
}
}
});

基本用法:

1.引入百度地图JavaScript 极速版文章来源地址:https://www.yii666.com/article/754330.html

http://api.map.baidu.com/api?type=quick&ak=Y5wTAbhgC4EDVgaBnzCUYO9l&v=1.0

2.在视图中使用,用法类似官方谷歌地图控件文章来源地址https://www.yii666.com/article/754330.html网址:yii666.com<

 Ext.define('app.view.Map', {
alternateClassName: 'map',
extend: 'ux.BMap',
xtype: 'map',
config: {
title: '地图',
/// <summary>
/// 地图配置
/// </summary>
/// <param name="center">中心坐标点:{lng:'',lat:''}</param>
/// <param name="locate">是否加载定位控件</param>
/// <param name="markers">标点集合[{lng:'',lat:''}]</param>
mapOptions: {
locate: true,
markers: [{ lng: '116.404', lat: '39.915', options: '天安门' }, { lng: '116.1', lat: '39.915', options: '地安门' }]
},
//是否监听标点的点击事件
markerTap:true,
//私有变量,定位按钮
locate: null
}
});

效果图:网址:yii666.com

sencha touch 百度地图扩展(2014-6-24)(废弃 仅参考)

版权声明:本文内容来源于网络,版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。文本页已经标记具体来源原文地址,请点击原文查看来源网址,站内文章以及资源内容站长不承诺其正确性,如侵犯了您的权益,请联系站长如有侵权请联系站长,将立刻删除

sencha touch 百度地图扩展(2014-6-24)(废弃 仅参考)-相关文章

  1. sencha touch 百度地图扩展(2014-12-17)

  2. Ehcarts 与 百度地图结合时,如何获取bmap的实例对象?

  3. sencha touch 百度地图扩展(2014-6-24)(废弃 仅参考)

  4. iOS第三方地图-百度地图常用功能使用(POI搜索,地理正反编码,定位,添加标注)

    百度地图官网: http://developer.baidu.com/map/index.php?title=iossdk百度地图集成1.引入相关包aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPgAAADDCAYAAACvbNxlAAAKomlDQ1BJQ0MgUHJvZmlsZQAASImVlwdUU2kWx7/30hstEAEpoXekV+k1dOlgIyQQQokhEBREVERUYEQREQFF0BEQBUelyFgQUSwMAvY6IIOCMg4WQEVlH7CE3T07Z8/enHve7/zfffe773vfPecGAPINJp+fCEsAkMRLFQR6ONPDIyLpuN8BB

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png