【重点突破】—— 百度地图在React单页面应用中的使用

2023-11-06

【重点突破】—— 百度地图在React单页面应用中的使用

前言：百度地图是网页中使用地图的常用第三方工具，这里结合React项目中学到的应用场景总结一些使用要点。

一、在网页中嵌入百度地图

搜百度地图开放平台，注册百度开发者账号

控制台：查看应用、创建应用（获得百度地图密钥）
开发文档：选择JavaScriptAPI

Referer白名单：* （例如*.tedu.cn 域名只能有这个字段，才能使用这个密钥，避免因盗用密钥使用自己网站的服务）

创建一个网站：登录百度地图开发者平台，为网站申请一个地图的AccesKey（全球唯一网站密钥）
在自己的网页中嵌入百度地图提供的API，嵌入百度地图

引入一个特殊的script，关键放置密钥的地方：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>

核心代码：

var map = new BMap.Map("container");  //创建地图实例
var point = new BMap.Point(116.300829, 39.915836); //创建点坐标（天安门坐标为例）
map.centerAndZoom(point, 17); //以指定点为中心并缩放 （17表示层级）

常用控件：可能会变，不用记，查文档即可

启用滚轮缩放方法：map.enableScrollWheelZoom(true);
添加导航控件：map.addControl(new BMap.NacigationControl());
添加缩放控件：map.addControl(new BMap.ScalControl());
添加概览图控件：map.addControl(new BMap.OverviewMapControl());　
添加地图类型控件：map.addControl(new BMap.MapTypeControl());

常用覆盖物：小标记/小说明/小页签

var mk = new BMap.Marker(point);
map.addOverlay(mk);
marker.setAnimation(BMap)ANIMATION_BOUNCE); //弹跳动画

二、绘制订单地图

Easy Mock订单详情数据接口：/order/detail

{
  "code": 0,
  "msg": "",
  "list": {
    "status": 2,
    "order_sn": "T1803244422704080JGJI",
    "bike_sn": '802410001',
    "mode|1-2": 1,
    "start_location": "北京市昌平区回龙观东大街",
    "end_location": "北京市海淀区奥林匹克公园",
    "city_id": 1,
    "mobile": "13597482075",
    "user_name": "@cname",
    "distance": 10000,
    "bike_gps": "116.398806,40.008637",
    "start_time": 1546580667000,
    "end_time": 1546608995000,
    "total_time": 224,
    "position_list": [{
        "lon": 116.361221,
        "lat": 40.043776
      },
      {
        "lon": 116.363736,
        "lat": 40.038086
      },
      {
        "lon": 116.364599,
        "lat": 40.036484
      },
      {
        "lon": 116.373438,
        "lat": 40.03538
      },
      {
        "lon": 116.377966,
        "lat": 40.036263
      },
      {
        "lon": 116.379762,
        "lat": 40.03654
      },
      {
        "lon": 116.38084,
        "lat": 40.033225
      },
      {
        "lon": 116.38084,
        "lat": 40.029413
      },
      {
        "lon": 116.381343,
        "lat": 40.021291
      },
      {
        "lon": 116.381846,
        "lat": 40.015821
      },
      {
        "lon": 116.382637,
        "lat": 40.008084
      },
      {
        "lon": 116.398806,
        "lat": 40.008637
      }
    ],
    "area": [{
        "lon": "116.274737",
        "lat": "40.139759",
        "ts": null
      },
      {
        "lon": "116.316562",
        "lat": "40.144943",
        "ts": null
      },
      {
        "lon": "116.351631",
        "lat": "40.129498",
        "ts": null
      },
      {
        "lon": "116.390582",
        "lat": "40.082481",
        "ts": null
      },
      {
        "lon": "116.38742",
        "lat": "40.01065",
        "ts": null
      },
      {
        "lon": "116.414297",
        "lat": "40.01181",
        "ts": null
      },
      {
        "lon": "116.696242",
        "lat": "39.964035",
        "ts": null
      },
      {
        "lon": "116.494498",
        "lat": "39.851306",
        "ts": null
      },
      {
        "lon": "116.238086",
        "lat": "39.848647",
        "ts": null
      },
      {
        "lon": "116.189454",
        "lat": "39.999418",
        "ts": null
      },
      {
        "lon": "116.244646",
        "lat": "39.990574",
        "ts": null
      },
      {
        "lon": "116.281441",
        "lat": "40.008703",
        "ts": null
      },
      {
        "lon": "116.271092",
        "lat": "40.142201",
        "ts": null
      },
      {
        "lon": "116.271092",
        "lat": "40.142201",
        "ts": null
      }
    ],
    "area_list": null,
    "npl_list": [{
      "id": 8265,
      "name": "北辰世纪中心-a座",
      "city_id": 1,
      "type": 3,
      "status": 0,
      "map_point": "116.39338796444|40.008120315215;116.39494038009002|40.008177258745;116.39496911688|40.006268094213;116.39512457763|40.004256795877;116.39360214742|40.004222412241;116.39357190147|40.005075745782;116.39351397873|40.005836165232;116.39338796444|40.008120315215",
      "map_point_array": [
        "116.39338796444|40.008120315215",
        "116.396053|40.008273",
        "116.396448|40.006338",
        "116.396915|40.004266",
        "116.39192|40.004072",
        "116.391525|40.004984",
        "116.391381|40.005924",
        "116.391166|40.007913"
      ],
      "map_status": 1,
      "creator_name": "赵程程",
      "create_time": 1507863539000
    }]
  }
}

创建ak，加载百度地图sdk：【百度地图开发平台】

地图初始化：public->index.html中引入百度地图第三方JS库

<title>React App</title>
<!--第三方库 百度地图-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=vALBxRpSKdoPxLyDcuMQPWFL8avoRTP0"></script>

pages->order->detail.js中：调用new window.BMap.Map('id')初始化Map

//初始化地图
renderMap = (list) => {
        this.map = new window.BMap.Map('orderDetailMap');
        // this.map.centerAndZoom('北京', 11)
        //添加地图控件
        this.addMapControl();
        //调用路线图绘制方法
        this.drawBikeRoute(list.position_list);
        //调用服务区绘制方法
        this.drawServiceArea(list.area);
}

注意：单页面应用必须调用window.BMap全局变量才能识别BMap，否则会报错no defined；多页面应用中直接使用new BMao.Map('id')即可

添加地图控件

//添加地图控件 
addMapControl = () => {
        let map = this.map;
        map.addControl(new window.BMap.ScaleControl({ anchor: window.BMAP_ANCHOR_TOP_RIGHT }));
        map.addControl(new window.BMap.NavigationControl({ anchor: window.BMAP_ANCHOR_TOP_RIGHT }));
}

绘制用户行驶路线

//绘制用户行驶路线图
drawBikeRoute = (positionList) => {
        let map = this.map;
        let startPoint = '';
        let endPoint = '';
        if(positionList.length > 0){
           //起点
           let first = positionList[0]; 
           startPoint = new window.BMap.Point(first.lon, first.lat);
           let startIcon = new window.BMap.Icon('/assets/start_point.png', new window.BMap.Size(36,42),{
               imageSize: new window.BMap.Size(36,42),
               anchor: new window.BMap.Size(36,42)
           })

           let startMarker = new window.BMap.Marker(startPoint, {icon: startIcon});
           this.map.addOverlay(startMarker);

           //终点
           let last = positionList[positionList.length-1]; 
           endPoint = new window.BMap.Point(last.lon, last.lat);
           let endIcon = new window.BMap.Icon('/assets/end_point.png', new window.BMap.Size(36,42),{
               imageSize: new window.BMap.Size(36,42),
               anchor: new window.BMap.Size(36,42)
           })
           let endMarker = new window.BMap.Marker(endPoint, {icon: endIcon});
           this.map.addOverlay(endMarker);
          
           //连接路线图
           let trackPoint = [];
           for(let i=0; i<positionList.length; i++){
               let point = positionList[i]
               trackPoint.push(new window.BMap.Point(point.lon, point.lat))
           }

           let polyline = new window.BMap.Polyline(trackPoint, {
               strokeColor: '#1869AD',
               strokeWeight: 3,
               strokeOpacity: 1
           })
           this.map.addOverlay(polyline);

           //设置地图中心点
           this.map.centerAndZoom(endPoint, 11)
        }
}   

//绘制服务区
drawServiceArea = (positionList) => {
        let trackPoint = [];
        for(let i=0; i<positionList.length; i++){
               let point = positionList[i]
               trackPoint.push(new window.BMap.Point(point.lon, point.lat))
        }

        let polygon = new window.BMap.Polygon(trackPoint, {
            strokeColor: '#CE0000',
            strokeWeight: 4,
            strokeOpacity: 1,
            fillColor: '#ff8605',
            fillOpacity: 0.4
        }) 
        this.map.addOverlay(polygon);
}

三、绘制车辆地图

Easy Mock车辆地图分布的数据接口：/map/bike_list

{
  "code": 0,
  "list": {
    "total_count": 100,
    "bike_list": ['116.356619,40.017782', '116.437107,39.975331', '116.34972,40.070808', '116.323849,39.964714', '116.404912,40.015129', '116.365243,39.958078'],
    "route_list": ['116.353101,40.067835', '116.357701,40.053699', '116.374086,40.027626', '116.397801,40.01641'],
    "service_list": [{
        "lon": "116.274737",
        "lat": "40.139759",
        "ts": null
      },
      {
        "lon": "116.316562",
        "lat": "40.144943",
        "ts": null
      },
      {
        "lon": "116.351631",
        "lat": "40.129498",
        "ts": null
      },
      {
        "lon": "116.390582",
        "lat": "40.082481",
        "ts": null
      },
      {
        "lon": "116.38742",
        "lat": "40.01065",
        "ts": null
      },
      {
        "lon": "116.414297",
        "lat": "40.01181",
        "ts": null
      },
      {
        "lon": "116.696242",
        "lat": "39.964035",
        "ts": null
      },
      {
        "lon": "116.494498",
        "lat": "39.851306",
        "ts": null
      },
      {
        "lon": "116.238086",
        "lat": "39.848647",
        "ts": null
      },
      {
        "lon": "116.189454",
        "lat": "39.999418",
        "ts": null
      },
      {
        "lon": "116.244646",
        "lat": "39.990574",
        "ts": null
      },
      {
        "lon": "116.281441",
        "lat": "40.008703",
        "ts": null
      },
      {
        "lon": "116.271092",
        "lat": "40.142201",
        "ts": null
      },
      {
        "lon": "116.271092",
        "lat": "40.142201",
        "ts": null
      }
    ]
  }
}

pages->map->bikeMap.js中：调用new window.BMap.Map('id')初始化Map

//初始化地图
renderMap = (res) => {
        //渲染地图数据
        let list = res.list.route_list;
        this.map = new window.BMap.Map('container');
        let gps1 = list[0].split(',');
        let startPoint = new window.BMap.Point(gps1[0],gps1[1]);
        let gps2 = list[list.length-1].split(',');
        let endPoint = new window.BMap.Point(gps2[0],gps2[1]);
        this.map.centerAndZoom(endPoint, 11);
        
        //起点 -- 图标Icon/覆盖物Marker/添加addOverlay
        let startPointIcon = new window.BMap.Icon('/assets/start_point.png', new window.BMap.Size(36,42),{
            imageSize: new window.BMap.Size(36,42),
            anchor: new window.BMap.Size(18,42) //偏移
        })
        let bikeMarkerStart = new window.BMap.Marker(startPoint,{icon: startPointIcon})
        this.map.addOverlay(bikeMarkerStart)

        //终点
        let endPointIcon = new window.BMap.Icon('/assets/end_point.png', new window.BMap.Size(36,42),{
            imageSize: new window.BMap.Size(36,42),
            anchor: new window.BMap.Size(18,42)
        })
        let bikeMarkerEnd = new window.BMap.Marker(endPoint,{icon: endPointIcon})
        this.map.addOverlay(bikeMarkerEnd)

        //绘制车辆行驶路线
        let routeList = [];
        list.forEach((item) => {
            let p = item.split(',');
            routeList.push(new window.BMap.Point(p[0],p[1]));
        })
        let polyLine = new window.BMap.Polyline(routeList, {
            strokeColor: '#ef4136',
            strokeWeight: 2,
            strokeOpacity: 1
        })
        this.map.addOverlay(polyLine);

        //绘制服务区
        let servicePointList = [];
        let serviceList = res.list.service_list;
        serviceList.forEach((item) => {
            servicePointList.push(new window.BMap.Point(item.lon, item.lat));
        })
        let polyServiceLine = new window.BMap.Polyline(servicePointList, {
            strokeColor: '#1869AD',
            strokeWeight: 3,
            strokeOpacity: 1
        })
        this.map.addOverlay(polyServiceLine);

        //添加地图中的自行车图标
        let bikeList = res.list.bike_list;
        let bikeIcon = new window.BMap.Icon('/assets/bike.jpg', new window.BMap.Size(36,42),{
            imageSize: new window.BMap.Size(36,42),
            anchor: new window.BMap.Size(18,42)
        })
        bikeList.forEach((item) => {
            let p = item.split(',');
            let point = new window.BMap.Point(p[0],p[1]);
            let bikeMarker = new window.BMap.Marker(point, {icon: bikeIcon})
            this.map.addOverlay(bikeMarker);
        })
       
        //添加地图控件
        this.map.addControl(new window.BMap.ScaleControl({ anchor: window.BMAP_ANCHOR_TOP_RIGHT }));
        this.map.addControl(new window.BMap.NavigationControl({ anchor: window.BMAP_ANCHOR_TOP_RIGHT }));
 }

实例代码：

import React from 'react'
import {Card, Form} from 'antd'
import axios from './../../axios'
import BaseForm from '../../components/BaseForm'

export default class BikeMap extends React.Component{

    state = {
        list:[]
    }

    map='';

    params = {
        page: 1
    }

    formList = [
        {
            type: 'SELECT',
            label: '城市',
            field: 'city_id',
            placeholder: '全部',
            initialValue: '0',
            list: [
                {id: '0', name: '全部'},
                {id: '1', name: '北京'},
                {id: '2', name: '天津'},
                {id: '3', name: '深圳'},
            ]
            
        },{
            type: '时间查询'
        },{
            type: 'SELECT',
            label: '订单状态',
            field: 'order_status',
            placeholder: '全部',
            initialValue: '0',
            list: [
                {id: '0', name: '全部'},
                {id: '1', name: '进行中'},
                {id: '2', name: '行程结束'}
            ]
        }
    ]

    componentDidMount(){
        this.requestList();
    }

    requestList = () => {
       axios.ajax({
           url: '/map/bike_list',
           data: {
               params: this.params
           }
       }).then((res) => {
           if(res.code === 0){
               this.setState({
                   total_count: res.list.total_count
               })
               this.renderMap(res);
           }
       })
    }

    //查询表单
    handleFilterSubmit = (filterParams) => {
        this.params = filterParams;
        this.requestList();
    }

    //初始化地图
    renderMap = (res) => {
        //渲染地图数据
        let list = res.list.route_list;
        this.map = new window.BMap.Map('container');
        let gps1 = list[0].split(',');
        let startPoint = new window.BMap.Point(gps1[0],gps1[1]);
        let gps2 = list[list.length-1].split(',');
        let endPoint = new window.BMap.Point(gps2[0],gps2[1]);
        this.map.centerAndZoom(endPoint, 11);
        
        //起点 -- 图标Icon/覆盖物Marker/添加addOverlay
        let startPointIcon = new window.BMap.Icon('/assets/start_point.png', new window.BMap.Size(36,42),{
            imageSize: new window.BMap.Size(36,42),
            anchor: new window.BMap.Size(18,42) //偏移
        })
        let bikeMarkerStart = new window.BMap.Marker(startPoint,{icon: startPointIcon})
        this.map.addOverlay(bikeMarkerStart)

        //终点
        let endPointIcon = new window.BMap.Icon('/assets/end_point.png', new window.BMap.Size(36,42),{
            imageSize: new window.BMap.Size(36,42),
            anchor: new window.BMap.Size(18,42)
        })
        let bikeMarkerEnd = new window.BMap.Marker(endPoint,{icon: endPointIcon})
        this.map.addOverlay(bikeMarkerEnd)

        //绘制车辆行驶路线
        let routeList = [];
        list.forEach((item) => {
            let p = item.split(',');
            routeList.push(new window.BMap.Point(p[0],p[1]));
        })
        let polyLine = new window.BMap.Polyline(routeList, {
            strokeColor: '#ef4136',
            strokeWeight: 2,
            strokeOpacity: 1
        })
        this.map.addOverlay(polyLine);

        //绘制服务区
        let servicePointList = [];
        let serviceList = res.list.service_list;
        serviceList.forEach((item) => {
            servicePointList.push(new window.BMap.Point(item.lon, item.lat));
        })
        let polyServiceLine = new window.BMap.Polyline(servicePointList, {
            strokeColor: '#1869AD',
            strokeWeight: 3,
            strokeOpacity: 1
        })
        this.map.addOverlay(polyServiceLine);

        //添加地图中的自行车图标
        let bikeList = res.list.bike_list;
        let bikeIcon = new window.BMap.Icon('/assets/bike.jpg', new window.BMap.Size(36,42),{
            imageSize: new window.BMap.Size(36,42),
            anchor: new window.BMap.Size(18,42)
        })
        bikeList.forEach((item) => {
            let p = item.split(',');
            let point = new window.BMap.Point(p[0],p[1]);
            let bikeMarker = new window.BMap.Marker(point, {icon: bikeIcon})
            this.map.addOverlay(bikeMarker);
        })
       
        //添加地图控件
        this.map.addControl(new window.BMap.ScaleControl({ anchor: window.BMAP_ANCHOR_TOP_RIGHT }));
        this.map.addControl(new window.BMap.NavigationControl({ anchor: window.BMAP_ANCHOR_TOP_RIGHT }));
    }
    
    render(){
        return (
            <div>
                <Card>
                    <BaseForm formList={this.formList} filterSubmit={this.handleFilterSubmit} />
                </Card>
                <Card style={{marginTop: 10}}>
                    <div>共{this.state.total_count}辆车</div>
                    <div id="container" style={{height: 500}}></div>
                </Card>
            </div>
        )
    }
}

注：转载请注明出处　　

posted @ 2019-01-11 11:11 柳洁琼Elena 阅读( ...) 评论( ...) 编辑收藏

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

【重点突破】—— 百度地图在React单页面应用中的使用的相关文章

桌面路径改到D盘的目录下

桌面路径改到D盘的目录下首先在你的D盘先创建一个desk文件夹然后在左边这里找到桌面点击右击属性然后点击位置把这个位置修改为刚才你在D盘所创建的文件夹的位置这样就大功告成了似不似so easy
MyBatis关系映射

文章目录前言一一对一映射 1 1 创建实体 1 2 xml配置二一对多映射 2 1 创建实体 2 2 resultMap配置 2 3 测试三多对多映射 3 1 创建实体 3 2 resultMap配置 3 3 测试前言 My
6-urdf

URDF Unified Robot Description Format 统一机器人描述格式基本概念 1 urdf 文件定义机器人的结构 2 用于机器人的仿真可视化 tf 3 ROS 的中包含一个urdf包用来解析urdf文件描
CSDN为什么会发展社区？看看官方怎么说

文章目录课前小差 23年可兼收名利博客之星红包活动相聚线下妙笔生花原力计划个人定位为什么要发展社区写在最后课前小差哈喽大家好我是几何心凉这是一份全新的专栏唯一得到CSDN王总的授权来对于我们每周四的绿萝时间
乐观锁实现接口幂等性_Elasticsearch系列---并发控制及乐观锁实现原理

概要本篇主要介绍一下Elasticsearch的并发控制和乐观锁的实现原理列举常见的电商场景关系型数据库的并发控制 ES的并发控制实践并发场景不论是关系型数据库的应用还是使用Elasticsearch做搜索加速的场景只要有数据
Qt中的项目类型(二)

使用Qt进行软件开发第一个要考虑的问题就是为需要开发的软件选择一个合适的Qt项目类型 Qt中的项目类型有 Application 应用项目项目编译结果是可执行程序 Library 库项目项目编译结果是静态库或动态库其他项目辅
登录功能使用Base64进行加密(解密) ---jsp页面以及servlet页面。（废了。不安全。。。。。）

使用Base64在服务器端进行加密 String 加密后的字符串 Base64 getEncoder encodeToString 需要加密的字符串 getBytes byte 解密后的byte数组 Base64 getDecoder de
Markdown没能生成表格问题

小白刚使用MD时不知道怎样弄出表格刚开始使用Markdown 的时候不知道怎样转换成表格看了网上的直接用下面的方法就可以了但是为什么我的就是不出现表格呢 dog bird cat foo foo foo bar bar bar b
微信小程序模板消息接口下线了，不用慌，调用统一服务消息接口来实现相同功能

1 前言做过微信开发的应该都有一点感触就是他的开发文档不是一成不变的接口有时候会被下线但也不是一下子就不能用了一般会兼容旧接口然后提醒你使用新接口有更多好处如果接口真的直接下线了也会提供另一种能够实现相同功能的接口给你替换
Mysql千万级别数据批量插入只需简单三步

http blog csdn net u011277123 article details 61914773 T自由职业者 2017 03 05 09 40 第一步配置my ini文件文件中配置 bulk insert buffer s
Java中有哪些保留关键字呢？

转自 Java中有哪些保留关键字呢下文笔者讲述java中保留关键字的简介说明如下所示 private 一种访问控制方式私用模式 protected 一种访问控制方式保护模式 public 一种访问控制方式共用模式 abstract
Retrofit 上传文件

文件流的形式 Multipart POST upload LiveData
吴恩达机器学习笔记（七）神经网络：代价函数

Neural Networks Learning Cost function 逻辑回归代价函数 J 1
AI算力需求6年增长30万倍，「超异构计算」才能满足下一个10年

今年 3 月强化学习教父 Richard Sutton 在苦涩的教训一文中指出 70 年的人工智能研究史告诉我们利用计算能力的一般方法最终是最有效的方法要在短期内有所提升研究人员要利用专门领域的人类知识但如果想要长期的获得提升
nginx 配置后网站图片加载出来一半或者不出来

项目进行nginx反向代理后发现图片和js css等加载很慢甚至加载不出来然后查看nginx的log 发现错误如下 2023 08 29 17 15 11 crit 25439 0 18 open usr local nginx pro
Service为null，注入不成功

问题 Service注入不成功显示为null 而其他接口是正常的通过尝试后发现是接口访问权限的问题将 private 改为 public 后便可以了
Hive（一）

一 DDL 1 数据库操作 1 创建数据库语法 CREATE DATABASE IF NOT EXISTS database name COMMENT database comment LOCATION hdfs path WITH DB
LINUX bash shell脚本常用的选择功能

一选择语句case in 选择语句功能常用的有if else case in case target in uboot cleanUboot kernel cleanKernel libs buildLibs clean echo e n
chatgpt赋能python：Python教程：如何删去列表中的引号？

Python教程如何删去列表中的引号引言 Python是一种高级编程语言广泛应用于数据分析机器学习网络编程等领域对于python程序员来说操作列表数据结构是非常普遍的需求而有时候我们需要去除列表中的引号以便更方便地处理数
IDEA编辑lua的个人常用快捷键

Ctrl 鼠标左键快速定位到方法的主体 function 或者table的定义处或者字段的定义处先鼠标浮在其上 Ctrl G 快速定位到哪一行代码 Ctrl F 局部快速查找 Ctrl Shift F 全局快速查找 Ctrl R 本地字

随机推荐

关于Altium Designer一言不合就出现错误报告的解决方案

gt gt gt 背景最近在使用Altium Desiger 时总是会弹出这种提交错误报告的问题最近更新了AD2017 特意去网上各论坛和博客大神家里看了看相关问题发现这个貌似不是个例有网友说这个可能是AD 道板的通病所以特意结
如何给未越狱的ios下载历史版本的app？未越狱IOS系统安装历史版本软件的方法，iPhone未越狱的手机如何安装旧版本APP？

如何给未越狱的ios下载历史版本的app 未越狱IOS系统安装历史版本软件的方法 iPhone未越狱的手机如何安装旧版本APP IOS由于系统机制问题不支持版本回退某些更新可能导致闪退卡顿等未知bug https jingyan bai
《clean architecture》第二部分编程范式读书笔记

前言第二部分的主题内容 Chap3 编程范式总览三个编程范式思考和小结 Chap4 结构化编程可推导性 goto 是有害的功能分解测试小结 Chap5 面向对象编程封装继承多态依赖反转小结 Chap6 函数式编程不
Swift数据类型之字符、字符、数组、字典

Swift 字符串 Swift 字符串是一系列字符的集合例如 Hello World 这样的有序的字符类型的值的集合它的数据类型为 String 创建字符串你可以通过使用字符串字面量或 String 类的实例来创建一个字符串 impo
如何正确配置nginx php,php – 如何在nginx中正确配置alias指令？

我一直在尝试在我的Nginx网络服务器上配置多个webapp但我无法使用一个需要将 document root设置为laravel公共文件夹的Laravel应用程序我目前正在尝试使用别名指令配置它但由于一个不明确的原因这不起作用这是
PHP本地项目及docker项目的debug安装和vscode、phpstorm中具体使用教程

查看本地PHP应该下载的xdebug版本点击进入网址 https xdebug org wizard 将本地phpinfo的信息复制放到文本框中就可以查看与本地适配的xdebug版本按指令安装xdebug 按照上面的步骤下载文件移动文
让WordPress不同的分类目录的文章调用不同的模板

近日因为网站建设的需要在没有使用自定义文章类型的情况下使用不同的分类目录里的文章调用不同的模板作为注册wordpress大学的见面礼首先在function php里添加如下代码获取并输入某个分类的子分类 function po
解决choice金融终端Excel/Wps插件修复visual basic异常

注意如下情况无解注意 Excel要用专业版家庭版的Excel无法修复 WPS要用企业版个人版的Wps无法修复解决方法下面是安装Office专业版的教程进入网站https msdn itellyou cn 下载office专业版
Unity自定义输入方式（通过可视化面板进行输入）

去年某个时间段做VR功能预研利用Pico一体机做开发当时通过Unity内置Inputfield组件实现外部输入该组件貌似是调用系统内置输入方式 Pico一体机那个时候的输入方式简则是蛋疼得很因为一调用该输入法就是双目模式这就算了
Matlab程序设计（六）----创建函数（function）

本部分Matlab中的函数创建非常重要主要分为三个小部分本部分主要参考了Matlab文件的讲述 https ww2 mathworks cn help matlab function basics html 一函数基本知识 funct
Elasticsearch专栏-8.es读写性能及优化

es读写性能及优化写入性能服务器资源单机写入性能写入性能优化查询性能资源占用情况写入性能服务器资源资源数值服务器华为系统 centos7 9 cpu Intel Core i5 10500 CPU 3 10GHz
C#控制台应用程序生成10个随机数，并且保证他们不重复

1 这个和上面那个代码不同随机生成的10个随机数是会重复的因为它不确定所有我们在函数中加了一个判断函数将重复的数去掉就可以了 using System using System Collections using System Co
UML建模与软件开发设计（四）——包图设计

包图清晰地表达了包间关系对于大型项目而言良好的代码组织对软件的可维护性至关重要软件的架构设计思路遵循由大到小因此大型项目的结构往往从子系统模块包开始进行设计与类图 Class Diagram 相比包图 Package D
linux top命令查看内存及多核CPU的使用讲述

查看多核CPU命令 mpstat P ALL 和 sar P ALL 说明 sar P ALL gt aaa txt 重定向输出内容到文件 aaa txt top命令经常用来监控linux的系统状况比如cpu 内存的使用程序员基本都知
elasticsearch启动报错

系统操作centos7 虚拟机 bin elasticsearch 启动报错 es1 es1 software elasticsearch 6 3 1 bin elasticsearch Exception in thread main
误差函数erf

1 erf误差函数介绍 erf 是误差函数它是高斯概率密度函数的积分性质 2 erf误差函数在matlab中实现 erf函数在matlab里面可以直接作为内置函数使用 erf 0 与下面式子等价 syms s f f exp s 2 e
AcWing 3375. 成绩排序

题目题目链接3375 成绩排序思路思路要求稳定排序或者特判的快排写法一写两个sort中的比较函数的参数cmp 写法二直接在结构体中进行比较写法三归并排序代码1 include
Win11 Vmware 16 Pro 启动报错 ‘0xc000007b‘

一段时间没有使用Vmware 打开突然报错 0xc000007b 可能是因为安装了其他软件导致C 库被改变原因 C 库改变解决方法 windows打开控制面板然后打开程序卸载程序图中左下角然后找到图中两个C 程序分别右键卸载
YoloV8改进策略：将FasterNet与YoloV8深度融合，打造更快更强的检测网络

文章目录数据集官方模型的成绩改进一改进二改进三总结数据集本来想选COCO数据集但是我觉得训练相同的epoch是一种不公平的对比因为预训练本来就是COCO数据集上得来的这样对官方的模型有利而我改动了模型的结构导致了没
【重点突破】—— 百度地图在React单页面应用中的使用

重点突破百度地图在React单页面应用中的使用前言百度地图是网页中使用地图的常用第三方工具这里结合React项目中学到的应用场景总结一些使用要点一在网页中嵌入百度地图搜百度地图开放平台注册百度开发者账号控制台查看应用创

【重点突破】—— 百度地图在React单页面应用中的使用

【重点突破】—— 百度地图在React单页面应用中的使用 的相关文章

随机推荐

热门标签

【重点突破】—— 百度地图在React单页面应用中的使用的相关文章