搜索到
4
篇与
的结果
-
-
Springboot+LayUI使用百度地图显示多个地点 因工作业务需要，使用百度地图API，通过输入多个地点的经纬度，显示在百度地图上，并结合springboot+layui进行展示页面模板用的是freemarker。JS代码：<script type="text/javascript"> var markerArr = [ {title: "名称：宜阳恒丰园烩面馆", point: "112.182404, 34.52419", address: "宜阳县文明路恒丰园食府", tel: "未知"}, {title: "名称：宜阳钓鱼岛酒店", point: "112.194981,34.521459", address: "洛阳宜阳县城关镇红旗中路 ", tel: "未知"}, {title: "名称：宜阳锦龙喜宴酒店", point: "112.1996,34.5269", address: "宜阳县城关镇锦龙大道锦龙广场内", tel: "未知"}, {title: "名称：百姓厨房", point: "112.196712,34.521718", address: "洛阳宜阳县城关镇红旗中路与丰源路交叉口", tel: "未知"} ]; var map; //Map实例 function map_init() { map = new BMap.Map("map"); //第1步：设置地图中心点，宜阳钓鱼岛酒店 var point = new BMap.Point(112.194981, 34.521459); //第2步：初始化地图,设置中心点坐标和地图级别。 map.centerAndZoom(point, 11); //第3步：启用滚轮放大缩小 map.enableScrollWheelZoom(true); //第4步：向地图中添加缩放控件 var ctrlNav = new window.BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrlNav); //第5步：向地图中添加缩略图控件 var ctrlOve = new window.BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }); map.addControl(ctrlOve); //第6步：向地图中添加比例尺控件 var ctrlSca = new window.BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); map.addControl(ctrlSca); //第7步：绘制点 for (var i = 0; i < markerArr.length; i++) { var p0 = markerArr[i].point.split(",")[0]; var p1 = markerArr[i].point.split(",")[1]; var maker = addMarker(new window.BMap.Point(p0, p1), i); addInfoWindow(maker, markerArr[i], i); } } // 添加标注 function addMarker(point, index) { var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), { offset: new BMap.Size(10, 25), imageOffset: new BMap.Size(0, 0 - index * 25) }); var marker = new BMap.Marker(point, {icon: myIcon}); map.addOverlay(marker); return marker; } // 添加信息窗口 function addInfoWindow(marker, poi) { //pop弹窗标题 var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.title + '<\/div>'; //pop弹窗信息 var html = []; html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>'); html.push('<tr>'); html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:<\/td>'); html.push('<td style="vertical-align:top;line-height:16px">' + poi.address + ' <\/td>'); html.push('<\/tr>'); html.push('<\/tbody><\/table>'); var infoWindow = new BMap.InfoWindow(html.join(""), {title: title, width: 200}); var openInfoWinFun = function () { marker.openInfoWindow(infoWindow); }; marker.addEventListener("mouseover", openInfoWinFun); return openInfoWinFun; } //异步调用百度js function map_load() { var load = document.createElement("script"); load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init"; document.body.appendChild(load); } window.onload = map_load; </script>完成以上代码后，打开页面即可看到百度地图，已经刚刚添加4个地点，鼠标移入的时候能够展示出信息。但是这时候有一个不是很好看的地方，那就是地图左下角有一个百度地图的logo和一行文字。如何去掉呢？通过css样式隐藏掉，在 标签内添加css样式：<#-- 删除百度地图左下角的logo以及文字 --> <style type="text/css"> .BMap_cpyCtrl, .anchorBL { display: none; } </style>
-
React的基本使用 1、引入资源使用React需要引入三个js文件，分别是: react.js、react-dom.js、babel.min.js、涉及到PropType的还需要添加 prop-types.js引入的三个文件 script 类型都是 text/javascript2、使用React2.1、创建虚拟DOM使用babel脚本是 script 的类型 type="text/babel"var element = React.createElement('h1',{id:'myTitle'},'hello') // 纯js创建，一般不用 var element = {title}2.2、渲染虚拟DOMReactDOM.render(param1, param2)2.3、JSX创建react虚拟DOM（元素）对象var ele = Hello JSX!1、要注意的是它既不是字符串，也不是HTML/XML标签2、它最终产生的就是一个JS对象3、使用总结babel的作用，浏览器不能直接解析jsx代码，需要babel转译为纯js代码才能运行只要用了 jsx，都要加上 type="text/babel" ， 声明需要babel来处理3.1、如何将一个数据的数组转换为一个标签的数组？使用数组的Map（）const names = ['jquery','zepto','angular','react','vue'] const ul = ({ names.map((name) => {name}) })3.2、组件的使用1、组件名必须首字母大写2、虚拟DOM元素只能有一个根元素3、虚拟DOM元素必须有结束标签3.2.1、render()渲染组件标签的基本流程1）React内部会创建组件实例对象2）得到包含的虚拟DOM并解析为真实DOM3）插入到指定的页面元素内部3.3、状态有关1）初始化状态：constructor(props){ super(props) this.state = { stateProp1:value1, stateProp2:value2 } }2) 读取某个状态的值this.state.statePropertyName，比如上面的 this.state.stateProp13) 更新状态this.setState({ stateProp1:value3, stateProp2:value4 })4) 将新增方法中的this强制绑定为组件对象this.handleClick = this.handleClick.bind(this)3.4、input取值react中有一个属性类似HTML中的ID或者说class，即 ref，比如:<input type="text" ref="content">// 获取input的值const iuput = this.refs.content第二种方式：<input type="text" ref="{input" ==""> this.input=input} /> // 这也是后面react推荐的 代码有误，未修改获取input的值： const text = this.input.value去空格， const text = this.input.value.trim()把获取到的text存到 props中： this.props.add(text)
-
JavaScript学习笔记 正则表达式\d可匹配一个数字\w可匹配一个字母\s可匹配一个空格（包括tab键）.可以匹配一个任意字符1、在匹配边长的字符，正则表达式中，用：表示任意个字符+表示至少有1个字符?表示0个或1个字符（即可有可无）{n}表示匹配n个字符{n,m}表示匹配n-m个字符i表示对大小写不敏感举个例子：\d{3}\s+\d{3,8}1、\d{3}表示匹配3个数字，例如010；2、\s可以匹配一个空格（也包括Tab等空白符），所以\s+表示至少有一个空格，例如匹配 ，\t\t等；3、\d{3,8}表示3-8个数字，例如1234567。上面匹配的是以3个数字开头，用一个空格隔开，后接3到8位数的 一个区的短号。 比如010 3456782、进阶（更精确的匹配）使用[]可以更精确的匹配[0-9a-zA-Z\_]可以匹配一个 数字、字母或者下划线；[0-9a-zA-Z\_]可以匹配 至少 由一个数字、字母或者下划线组成的字符串，比如a100，0_Z，js2015等等；``可以没有其中的一两项[a-zA-Z\_\$][0-9a-zA-Z\_\$]可以匹配由字母或下划线、$开头，后接任意个由一个数字、字母或者下划线、$组成的字符串，也就是JavaScript允许的变量名；[a-zA-Z\_\$][0-9a-zA-Z\_\$]{0, 19}更精确地限制了变量的长度是1-20个字符（前面1个字符+后面最多19个字符）。A|B可以匹配A或B，所以(J|j)ava(S|s)cript可以匹配JavaScript、Javascript、javaScript或者javascript^表示行的开头，^\d表示只能以数字开头$表示行的结束，\w$表示只能以字母结束以下特殊字符需要转义. ? + $ ^ [ ] ( ) { } | \ / - , ;3、实用正则验证EMail正则表达式：/^([a-zA-Z0-9_\-\.])+\@([a-zA-Z0-9_\-\.])+\.([A-Za-z]{2,4})$/4、浏览器window变量充当全局作用域，还表示浏览器窗口。window对象有 innerwidth 和 innerheight 两个属性，可以获取浏览器的内部宽和内部高度。【注】内部宽高指的是出去菜单栏，工具栏，边框等占位元素后，用于显示网页的净宽高。在浏览器的console控制台输入：console.log(window inner size + window.innerwidth + x + window.innerheight);输出: window inner size: 1440 x 790 // 这是我的13.3寸的macbook airouterwidth and outerheight 显示的是整个屏幕的大小，也就是你电脑显示屏的完整大小。（能显示东西的）navigator表示浏览器的信息，常用属性navigator.appName浏览器名称；navigator.appVersion: 浏览器版本；navigator.language浏览器设置的语言；navigator.platform操作系统类型；navigator.userAgent浏览器设置的 User-Agent 字符串screen对象表示屏幕的信息，常用属性有：screen.width: 屏幕宽度，以像素为单位screen.height 屏幕高度，以像素微单screen.colorDepth 返回颜色数，如 8、 16、 24location对象表示当前页面的URL信息。例如，一个完整的URL：http://www.example.com:8080/path/index.html?a=1&b=2#TOP location.protocol; // http location.host; // www.example.com location.port; // 8080 location.pathname; // /path/index.html location.search; // ?a=1&b=2 location.hash; // TOP重新加载一个页面 locaction.assign()重新加载当前页面 location.reload()让网页弹出一个对话框 confirm('你刚才点了我吗？')5、操作文件对文件的操作只有一种，那就是`,而且表单中，method 必须得是 post ，并且enctype必须得是multipart/form-data`为减轻服务器的负载，用js在用户提交表单时，对用户上传的文件类型进行判断：var f = document.getElementById(testupload); var filename = f.value; if (!filename || !(filename.endsWith(.jpg)) || !(filename.endsWith(png)) || !(filename.endsWith(gif)) { alert(unsupported file type!); return false; }File API:javascript对用户上传的文件的操作权限非常有限， 尤其是无法读取文件的内容，HTML5的file api提供了File 和 FileReader两个主要对象
