十四、地图

最新推荐文章于 2021-03-02 03:15:52 发布

大侠肖

最新推荐文章于 2021-03-02 03:15:52 发布

阅读量1.1k

点赞数

分类专栏： ExtJS 文章标签： function stylesheet 百度 javascript html api

本文链接：https://blog.csdn.net/xwebsite/article/details/7992247

版权

ExtJS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

目前很多地图服务商提供了面向Javascript的地图服务，如百度、Google、MapABC、微软等，其开发方式都大同小异。下面以百度地图为例来说明这一过程，我们以前面自定义组件的知识为基础，通过自定义一个MyMapPanel来显示和管理地图。

首先新建一个MapTest.html网页，其内容如下：

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01//EN">

<html>

<head>

<scripttype="text/javascript"src="bootstrap.js"></script>

</head>

<body>

</body>

</html>

由于要采用百度地图，所以添加脚本引用，目前百度地图提供的版本为1.3，其对应地址为http://api.map.baidu.com/api?v=1.3。具体地址可以参考百度地图API(http://dev.baidu.com/wiki/static/index.htm)。

然后新建一个用于自定义组件的js文件MyMapPanel.js，其内容如下：

/* 地图显示面板 */

Ext.define('XZY.MyMapPanel',{

extend:'Ext.panel.Panel', //继承的组件

alias:'widget.mymappanel',

requires: ['Ext.window.MessageBox'],

title:'地图组件', //标题

centerX:116.404, //地图中心经度，自定义变量

centerY:39.915, //地图中心纬度，自定义变量

height:600, //高度

autoScroll :true, //自动滑动

map:null, //地图对象，自定义变量

initComponent : function(){ //初始化组件函数

this.callParent(); //返回至父容器中,这句是必须的

initialMap:function(){ //初始化地图

this.map = new BMap.Map(this.body.dom);//创建地图

var point = new BMap.Point(this.centerX, this.centerY);// 创建点坐标

this.map.centerAndZoom(point, 15);//缩放至该中心

centerAt:function(centerX,centerY){ //移动至指定中心

this.centerX=centerX;

this.centerY=centerY;

var point = new BMap.Point(this.centerX, this.centerY);// 创建点坐标

this.map.setCenter(point);//缩放至该中心

mapZoomIn:function(){ //地图放大

this.map.zoomIn();//地图放大一级

mapZoomOut:function(){ //地图缩小

this.map.zoomOut();//地图缩小一级

items:[

ToolWin = Ext.create('Ext.Window',{ //定义一个工具窗体

title:'工具', //窗体标题

closable:false, //不能关闭

collapsible:true,

width:200, //宽度

height:350, //高度

layout:'absolute', //布局

x:5,

y:30,

items:[ //包含的对象

Ext.create('Ext.Button',{

text:'放大',

x:5,

y:5,

icon:'images/zoomIn_16.png', //图标文件路径

listeners:{

'click':function(){

this.ownerCt.ownerCt.mapZoomIn();

}

}}),

Ext.create('Ext.Button',{

text:'缩小',

x:5,

y:35,

icon:'images/zoomOut_16.png', //图标文件路径

listeners:{

'click':function(){

this.ownerCt.ownerCt.mapZoomOut();

}

}})]

}).show() //显示该Window窗体

]

});

以上代码与前面创建自定义组件的过程基本一致，只是增加了四个自定义函数：initialMap（用于初始化地图）、centerAt（用于指定地图中心）、mapZoomIn（放大地图）和mapZoomOut（缩小地图）。如果有其他需要，还可以添加更加丰富的函数，在此不继续进行扩展。另外在自定义的组件MyMapPanel中的items配置项里面添加了一个Window窗体，并在该窗体里面添加了两个按钮，分别用于放大地图和缩小地图，同时设置了按钮的图标（在images文件夹中添加两个图片文件zoomIn_16.png和zoomOut_16.png）。

最后，新建一个MapTest.js文件，并在里面创建一个自定义的MyMapPanel对象，如下：

Ext.Loader.setConfig({enabled: true});//允许设置参数

Ext.Loader.setPath('XZY', ''); //设置路径

Ext.onReady(function(){

var tempMapPanel = Ext.create('XZY.MyMapPanel',{

renderTo:myDiv

});

tempMapPanel.initialMap();//初始化地图

});

保存这三个文件（MapTest.html、MyMapPanel.js和MapTest.js），浏览网页MapTest.html，其结果如下图所示：

通过点击“放大”和“缩小”按钮即可实现地图的放大和缩小。更多丰富的地图功能请参看地图服务商发布的API。

值得注意的是，如果采用手机的GPS设备来采集坐标，其坐标系默认是WGS1984，而国内必须至少使用国测局制定的GCJ-02，对地理位置进行首次加密，百度对外接口的坐标系并不是GPS采集的真实经纬度，需要通过坐标转换接口进行转换。最简单的方式就是根据GPS实测的坐标和地图上坐标进行比较，获取其经纬度方向的差值。如用手机GPS测得的坐标为：111.28485852、30.70940625，但是在地图上该位置的坐标为：111.29694176、30.712093，其在经度方向差值为0.01208324，纬度方向差值为：0.00268675,那么在地图开发中加上这个差值用来校正GPS的偏差。