地图的开发研究---在线地图

关于地图的开发，目前有两种，谷歌或者百度地图提供的在线API(目前我使用的)，方便有效，但是需要用户可以连接到百度或者谷歌的服务器，即必须在线，对于重视安全隐私的局域网不适合。另一种就是开源组件使用的openlayer组件，提供离线地图，但是开发难度大，需要自己截取区域，并且有点丑。

目前我使用的是前者开发，为了比较两种地图的差异，两种地图都已开发，加载速度还算满意。

1.百度地图的开发：

开发百度地图，准备工作就是要申请一个密钥，引入百度地图的在线API接口：

这里我使用的是地址解析到经纬度，然后定点标注，根据后台查到的事件的发生地址通过百度的函数解析为经纬度然后在地图上标注出来，并给每个标注点添加提示框，显示事件详情。开发过程中遇到了2个问题：

（1）批量解析的时候，提示框的内容都是最后一个事件的内容，这个问题在网上好多人都遇到了，应该是百度API的问题。我的解决方法是在解析之前取出来想要的提示信息，然后再放到解析函数中，如下图红色代码，

Function bdGEO(){

init();//查到的事件信息保存到数组中

var add = adds[index];

geocodeSearch(add);

index++;

}

function geocodeSearch(add){

if(index < adds.length){

setTimeout(window.bdGEO,1);

}

var p1=title[index];

var p2=time[index];

var p3=info[index];

myGeo.getPoint(add, function(point){

if (point) {

var content=""+p1+"<hr></hr>时间："+p2+""+"地址："+add+""+"描述："+p3;

var marker = new BMap.Marker(new BMap.Point(point.lng, point.lat));

map.addOverlay(marker);//根据解析的经纬度增加标注点

//鼠标移到标注点显示信息

marker.addEventListener("mouseover", function () {

var infoWindow = new BMap.InfoWindow(content);

this.openInfoWindow(infoWindow);});

}

//鼠标移开标注点关闭信息框

marker.addEventListener("mouseout", function () {

this.closeInfoWindow();});

}, "克拉玛依市");

}

（2）上述代码中的setTimeout(window.bdGEO,1);不能缺少，如果直接用for循环里面调用解析函数会造成只显示一个标注点或者没有标注点，这个问题应该和附件组件提出的异步问题相似，for循环和地图加载异步，线程速度不一样，会造成只显示最后一个标注点。

2.谷歌地图的开发：

谷歌地图的开发一波三折，一开始使用的是v2版的谷歌地图在线API，需要密钥,本地开发测试都成功后，让局域网的他人访问页面测试，总是提示需要密钥，后来通过网上查询得知，v2版仅供本地测试开发，果断更改为v3，且不需要密钥。经过测试后没有问题，不过网上有人说访问次数有限制，所以目前推荐百度地图，百度地图颗粒度也比谷歌地图的高。

谷歌地图和百度地图的函数很相似，百度地图的两个问题谷歌也存在，就列出解析函数：

function geocodeSearch(address) {

if(index < adds.length-1){

setTimeout(window.bdGEO,1);

}

var geocoder = new google.maps.Geocoder();

var content=""+title[index]+""+"<hr></hr>时间："+time[index]+""+"地址："+address+""+"描述："+ info[index];

geocoder.geocode( { 'address': address}, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {

// console.log(results[0].geometry.location);

map.setCenter(results[0].geometry.location);

var infowindow = new google.maps.InfoWindow({

content: content

});

var marker = new google.maps.Marker({

map: map,

position: results[0].geometry.location

});

google.maps.event.addListener(marker, 'mouseover', function() {

infowindow.open(map,marker);

});

google.maps.event.addListener(marker, 'mouseout', function() {

infowindow.close();

});

其中console.log(results[0].geometry.location);本是用来控制台调试的，却造成了整个页面的困扰，导致后面好多代码不执行，可能单线程吧，被占用了。

总结;

，综合比较下来，在线的话还是使用百度地图比较好，因为加载速度快，地图的颗粒度更高，显示的内容更细致，相反谷歌浏览器效果不是那么理想。当然现在的在线地图显然不能满足现实，所以后期还是要开发离线地图方便局域网使用。

效果图：

谷歌地国

百度地图：

地图的开发研究---在线地图相关推荐

地图的开发研究--基于openlayers+geoserver+tomcat的离线地图--postgis空间数据库
此节主要介绍以下内容: 1.安装配置postgresql和postgis,升级postgresql为空间数据库,导入.shp格式的地图,转化为空间数据. 2.深入研究geoserver的用法和功能,实 ...
iOS定位服务与地图应用开发：高德地图开发
2019独角兽企业重金招聘Python工程师标准>>> 由于博客迁移至www.coderyi.com,文章请看http://www.coderyi.com/archives/419 ...
Arcgis加载在线地图（内涵各种在线地图）
一.连接在线地图 1.首先打开Arcgis,找到GIS服务器,双击添加WMTS服务器: 2.在URL框中填入在线地图URL:http://xdc.at/map/wmts/,点击获取图层,加载出在线图层 ...
java 地图控件_控件交互-与地图交互-开发指南-Android 地图SDK | 高德地图API
控件是指浮在地图图面上的一系列用于操作地图的组件,例如缩放按钮.指南针.定位按钮.比例尺等. UiSettings 类用于操控这些控件,以定制自己想要的视图效果.UiSettings 类对象的实例化需 ...
基于高德地图JSAPI 开发移动端地图红包
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
（转载）基于LBS地图的开发，满足地图上有头像的需求
最近做的项目主要是LBS这块主打成员定位功能我们的UI设计是这样的乍一看上去是挺好挺美观的不同的人会显示不同的头像可是当人扎堆的时候问题就来了当人多的时候(例如上图所示) 地图滑动起来就 ...
android高德地图截屏,地图截屏功能-与地图交互-开发指南-Android 地图SDK | 高德地图API...
/** * 对地图进行截屏 */ aMap.getMapScreenShot(new OnMapScreenShotListener() { @Override public void onMapSc ...
ios 点生成线路百度地图_iOS开发-集成百度地图（OC语言）
一.申请安全码图1-1 申请安全码二.导入SDK,添加依赖库 1.根据项目需求(定位?路径规划?)下载所需要的SDK包,传送门:下载百度地图SDK,并拖进项目中. 图2-1 导入SDK 2.添加依 ...
高德地图JavaScript API开发研究
高德地图JavaScript API开发研究原文:高德地图JavaScript API开发研究高德地图JavaScript API是一套用JavaScript 语言编写的应用程序接口,可以通过各种 ...

地图的开发研究---在线地图

地图的开发研究---在线地图相关推荐

最新文章

热门文章