基于WebSocket 的百度地图位置互享

太过爱你忘了你带给我的痛 2022-03-15 04:54 274阅读 0赞

# 一 功能简述 #

*  基于websocket
 *  基于百度地图
 *  实现位置互享

# 二 百度地图基本使用 #

[百度地图开发平台][Link 1]

1.  注册百度账户并且开启百度开发，获得AK码（注意浏览器需要选择浏览器版）
2.  使用AK码获得JavaScript , 具体使用方法参考API文档，很简单

以下是简单封装的文档

var _maplink = "https://api.map.baidu.com/api?v=3.0&ak=AK码";
    var baidumap;
    
    //生成百度地图调用链接
    function addScript() {
        //加载js API文件
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = _maplink + "&callback=_mapstart";
        document.head.appendChild(script);
    }
    
    addScript();
    
    //window.onload加载多个函数
    function addLoadEvent(func) {
        if (document.all) {
            window.attachEvent("onload", func); //对于IE
        } else {
            window.addEventListener("load", func, false); //对于FireFox
        }
    }
    
    function _mapstart() {
        console.log("map api loaded");
    }
    
    baidumap = {
        map: null,
        page_mapid: "container",
        centerpoint: "",
        longitude: 39.915,
        latitude: 116.404,
        defaultZoom: 13,
        init: function (page_mapid, centerpoint, zoom) {
            this.page_mapid = baidumap.errorcheck("isnull", page_mapid) ? "container" : page_mapid;
            this.centerpoint = baidumap.errorcheck("isnull", centerpoint) ? "" : centerpoint;
            baidumap.errorcheck("ok", "", this.createMap); //加载地图
        },
        createMap: function () {
            baidumap.map = new BMap.Map(baidumap.page_mapid);
            if (baidumap.errorcheck("isnull", baidumap.centerpoint)) {
                var point = new BMap.Point(baidumap.centerpoint);
                baidumap.map.centerAndZoom(point, baidumap.defaultZoom);
            } else {
                baidumap.map.centerAndZoom(new BMap.Point(baidumap.latitude, baidumap.longitude), baidumap.defaultZoom);
            }
        },
        getCenter: function () {
            return this.map.getCenter();
        },
        setCenter: function () {
            if (arguments.length <= 0)
                return;
            if (typeof arguments[0] === "object") {
                this.map.setCenter(arguments[0]);
            } else if (arguments.length >= 2) {
                this.map.setCenter(new BMap.Point(arguments[0], arguments[1]));
            }
        },
        errorcheck: function (code, obj, callback) {
            if ("ok" == code && typeof BMap === "undefined") {
                console.log("百度地图未成功加载,正在重新载入 ... ");
                baidumap.init();
                return false;
            } else if ("isnull" == code) {
                if (null == obj || typeof BMap === "undefined" || "" == obj || null == obj) {
                    return false
                }
            }
            if (typeof callback == "undefined") {
                return true;
            } else {
                callback();
            }
    
        }
    
    }

//以上是不完全版，会逐渐补全

# 三 webSocket 基础点 #

#### 3 . 1 > WebSocket 流程 ####

\------ > 1 建立 WebSocket 服务端  
\------ > 2 客户端 与 服务端 建立连接 === onOpen  
\------ > ------ > 2 .1 客户端建立到服务器的 TCP 连接  
\------ > ------ > 2 . 2 请求将该 TCP 连接 用作 websocket  
\------ > ------ > 3 . 3 服务器收到请求 , 同意该 webSocket 请求  
\------ > ------ > 3 . 4 客户端确定 , HTTP协议结束 , webScoket 双向通道构建  
\------ > 3 数据发送 === onMessage  
\------ > 4 关闭连接 === onClose

#### 3 . 2 > 建立连接详情 ( 此处是建立连接时 HTTP 头信息 ) ####

###### @ ------ > 发送 ######

GET /spring-websocket-portfolio/portfolio HTTP/1.1  
Host: localhost:8080  
Upgrade: websocket === 此处使用 Upgrade 头  
Connection: Upgrade === 使用 Upgrade 连接  
Sec-WebSocket-Key: Uc9l9TMkWGbHFD2qnFHltg==  
Sec-WebSocket-Protocol: v10.stomp, v11.stomp  
Sec-WebSocket-Version: 13  
Origin: [http://localhost:8080][http_localhost_8080]

###### @ ------ > 返回 ######

HTTP/1.1 101 Switching Protocols  
Upgrade: websocket === 此处切换为 websocket  
Connection: Upgrade  
Sec-WebSocket-Accept: 1qVdfYHU9hPOl4JYYNXF623Gzn0=  
Sec-WebSocket-Protocol: v10.stomp

#### 3 . 3 > 对比 HTTP 请求 ####

? ------ 1 WebSocket 开始于 HTTP 协议 , 且与 HTTP 协议 兼容  
? ------ 2 HTTP ( 包括 Rest ) 被 建模为多个URL , 客户端需要与 应用程序 交互 ,需要有URL , 请求 和 回复的类型,通过这些进行 URL 匹配 .  
? ------ 3 WebSocket 通常只有一个URL , 所有 应用信息都在该TCP 连接上流动 , 通过事件来驱动 .  
? ------ 4 WebSocket 是一种低级传输协议 ,与 HTTP 不同 , 只有 统一语义才能进行路由和消息处理 .  
? ------ 5 WebSocket 使用请求标头中的 Sec-WebSocket-Protocol 使用更高级的消息传递协议 ( STOMP )  
? ------ 6 限制代理可能会导致WebSocket 被关闭 ( Upgrade 未配置 , 长时间空闲被关闭 )

#### 3 . 4 > 详细代码 ####

//未完待续

[Link 1]: http://lbsyun.baidu.com/index.php?title=jspopular
[http_localhost_8080]: http://localhost:8080

发表评论取消回复

表情：

评论列表（有 0 条评论，274人围观）

还没有评论，来说两句吧...

相关阅读

相关 (android地图开发) 基于百度Lbs服务定位用户的当前位置

第一步：搭建百度地图(LBS)服务 ![Center][] 第二步：配置百度Lbs服务权限 <?xml version="1.0" encoding="utf-8

柔光的暖阳◎/ 2023年10月19日 00:54/ 0 赞/ 158 阅读

相关百度地图API获取当前位置

异步加载获取当前位置 //百度地图API功能 function loadJScript() { var script = do

一时失言乱红尘/ 2023年10月11日 15:03/ 0 赞/ 13 阅读

相关百度地图

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&services=true"></

电玩女神/ 2022年10月01日 03:58/ 0 赞/ 442 阅读

相关 Android百度地图开发之显示当前位置地图

步骤： 1、获取当前的经纬度 2、显示地图 3、改变地图中心的经纬度 -------------------- 1、获取当前的经纬度请参考网址： [

朴灿烈づ我的快乐病毒、/ 2022年09月23日 11:57/ 0 赞/ 316 阅读

相关百度地图位置访问

浏览器端 http://api.map.baidu.com/geocoder?output=json&ak=goIsShmGFYxtuAKOMogHt2U3d5q4VqE5

男娘i/ 2022年09月05日 04:20/ 0 赞/ 258 阅读

相关百度地图

百度地图Demo 详情请看 [http://lbsyun.baidu.com/index.php?title=jspopular/guide/introduction

太过爱你忘了你带给我的痛/ 2022年07月13日 10:59/ 0 赞/ 561 阅读

相关 Android百度地图(二):百度地图sdk显示位置点、图层绘制

转载、引用请标明出处 [http://www.jianshu.com/p/fdd1ba783495][http_www.jianshu.com_p_fdd1ba783495

清疚/ 2022年06月08日 05:38/ 0 赞/ 1145 阅读

相关百度地图

PC端定位不准确主要应用到移动端第一、申请百度密钥很简单的几步就搞定第二、引入文件 html 代码效果预览 1 2 3 4 5

朱雀/ 2022年06月05日 04:42/ 0 赞/ 511 阅读

相关百度地图

$(function(){ var BMapInit=function(){ var map =

曾经终败给现在/ 2022年05月23日 09:57/ 0 赞/ 498 阅读

相关基于WebSocket 的百度地图位置互享

一功能简述基于websocket 基于百度地图实现位置互享二百度地图基本使用 [百度地图开发平台][Link 1] 1. 注册百度

太过爱你忘了你带给我的痛/ 2022年03月15日 04:54/ 0 赞/ 275 阅读