浏览器部分补充

最新推荐文章于 2024-07-02 21:29:28 发布

CrazyHorse02

最新推荐文章于 2024-07-02 21:29:28 发布

阅读量981

点赞数

分类专栏：项目完成总结

本文链接：https://blog.csdn.net/u014209090/article/details/43153733

版权

项目完成总结专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这是本人才开始写博客，只是想把学到的东西做个记录以及和有兴趣的朋友一起交流，所以有什么不对的地方，还望指正O(∩_∩)O~

①要求新增功能：地图可以随意拖动，拖动时要求页面刷新所有网点信息，右侧的列表可以保留，但是列表与地图仍需要关联。

最开始做这个功能的时候，其实感觉很简单的，因为后台给的接口就有一个根据半径搜索所有网点信息，我只需要合理计算好半径distance就可以了，但是在实际使用中出现了很多问题：
1：给出的接口是java程序里面的，而不是IIS这边的，之前的数据都是从IIS上拿的，现在拖动出来的数据按照经理的要求是从tomcat上拿，那么就会出现一个跨域的问题，也就是js在开发中为了安全起见，禁止加载不同服务器上的数据，而且浏览器也很严肃考虑跨域请求这个问题，可以在浏览器的设置里面找到“是否允许跨域”这个选项，具体的内容请参考我的这篇关于同源策略的博客jsonp跨域请求数据的理解

2.如何取distance才是完美的，我用了大概一个下午的时间来想如何计算这个参数，开始我在百度在线地图上做测试，翻阅了很多关于GIS的资料，最后算是勉强比较合适了，最后交demo的时候，用户也觉得这个地方很不友好。出现的问题就是实际上已经返回了数据，右侧列表也是有数据的，但是地图上却是没有的，这个相当恼人。最后的解决办法也是很滑稽，伟大的Google工程师早就知道会出现这样的需求，所有他们在API里已经给出了一个叫做getbounds（）的方法，其方法就是返回浏览器屏幕四个边角在地图上所对应的经纬度，好了，这个问题就这么简单的解决了，五个坐标（四个边角和拖动的地图中心经纬度）（此处贴获取当前地图中心经纬度的代码）传递到后台然后稍微筛选一下就ok辣，这也证明了在开发前要仔细看开发环境给出的API。（此处贴代码，拖动后的方法实现）

var bounds = omap.getBounds();//得到地图四面的边界值
    var southWest = bounds.getSouthWest();//西南的经纬度
    var northEast = bounds.getNorthEast();//东北的经纬度
    var latMax=northEast.y;
    var lngMax=northEast.x;
    var latMin=southWest.y;
    var lngMin=southWest.x;

var sData = {
        /*latitude : curlat,
        longitude : curlng,
        distance : distance,*/
        maxLat :latMax,
        maxLong :lngMax,
        minLong :lngMin,
        minLat :latMin,
        pageIndex : intPageIndex + 1,
        itemCountPerPage : intRecordCount,
        catid : $("#searchCatID").val(),
        districtID : $("#searchDTID").val(),
        unitID : $("#searchUnitID").val(),
    };

// 跨域请求数据
function CrossDomainDataRequestDo(sData) {
    var prefixOfPostUrl = 'http://192.168.1.14:8080/yxgis/branch/';
    var url1 = prefixOfPostUrl + "query!branchListByDistance.action?callback=?";

    $.getJSON(url1, sData, function(data) {

       getJSONDataDo(data);

    });

}

值得注意的是：用jsonp拿数据的时候，即使后台返回的数据格式为json，但是jsonp这边还是出现一些书写错误即

浏览器开发者工具可以看到已经返回的数据，但是就是返回的数据报错。

Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 “Uncaught SyntaxError: Unexpected token :”，主要问题在于返回的数据格式不正确

这个问题前端是很难解决的，后台就很容易了只需要加一个callbackParameter字符串就可以了

<package name="branch" extends="json-default" namespace="/branch">  
        <action name="query" class="org.sikogis.cqpower.action.BranchAction">  
            <result name="success" type="json">  
            <param name="callbackParameter">callback</param>  
            </result>  
            <result name="input" type="json"></result>  
        </action>

3.我相信有一部分童鞋已经注意到了一个问题，在通过条件搜索之后如何让定义当前的地图位置和地图等级才能使所有的网点最友好的展示出来？在每次加载网点到地图上之前先进行一次计算算出最佳center和zoom就可以了，实现代码：

function lFuncGetMarkersCenterLatLng(){
    if(allmarkers.length==0){
        return;
    }
    var minLng,minLat,maxLng,maxLat,centerLng,centerLat;
    minLng = maxLng = allmarkers[0].getLatLng().x;
    minLat = maxLat = allmarkers[0].getLatLng().y;
    for(var i=1;i<allmarkers.length;i++){
        var tempLng = allmarkers[i].getLatLng().x;
        var tempLat = allmarkers[i].getLatLng().y;
        if(minLng > tempLng) { minLng = tempLng; }
        if(maxLng < tempLng) { maxLng = tempLng; }
        if(minLat > tempLat) { minLat = tempLat; }
        if(maxLat < tempLat) { maxLat = tempLat; }
    }
    centerLng = minLng + (maxLng-minLng)/2;
    centerLat = minLat + (maxLat-minLat)/2;
    return new GLatLng(centerLat,centerLng);
}
//ok
function lFuncGetFitViewLevel(){
    if(allmarkers.length==0){
        return;
    }
    var minLng,minLat,maxLng,maxLat,centerLng,centerLat;
    minLng = maxLng = allmarkers[0].getLatLng().x;
    minLat = maxLat = allmarkers[0].getLatLng().y;
    for(var i=1;i<allmarkers.length;i++){
        var tempLng = allmarkers[i].getLatLng().x;
        var tempLat = allmarkers[i].getLatLng().y;
        if(minLng > tempLng) { minLng = tempLng; }
        if(maxLng < tempLng) { maxLng = tempLng; }
        if(minLat > tempLat) { minLat = tempLat; }
        if(maxLat < tempLat) { maxLat = tempLat; }
    }
    return omap.getBoundsZoomLevel(new GLatLngBounds(new GLatLng(minLat,minLng),new GLatLng(maxLat,maxLng)));
}