当前位置:  编程技术>WEB前端
本页文章导读:
    ▪Google Maps Api 多坐标分类标记,在地图上显示海量坐标,并分组显示。      例子实现:在可视的区域内有1000个坐标,他们会按照一定缩放距离自动分类到一个点内,点击该分类点,显示该类所有的坐标。效果如下图:<html xmlns="http://www.w3.org/1999/xhtml"><head runat=".........
    ▪windows下node.js之 express框架+jade模板搭建       1、node.js安装在Windows平台部署Node.js比较容易,从0.6.1开始,Node.js在Windows平台上可直接通过.mis文件安装。下载地址http://nodejs.org/#download 目前最新版本是 node-v0.8.3-x86.msi文件在安装.........
    ▪JavaScript中“基本类型”之争      前端面试中常被问到的问题之一就是“JavaScript的基本类型有几种?”。有的回答“数字、字符串、布尔”,有的可能会再加上“Null、Undefined”。而有人可能认为“object&rd.........

[1]Google Maps Api 多坐标分类标记,在地图上显示海量坐标,并分组显示。
    来源:    发布时间: 2013-10-16

例子实现:在可视的区域内有1000个坐标,他们会按照一定缩放距离自动分类到一个点内,点击该分类点,显示该类所有的坐标。效果如下图:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="/blog_article/Js/js_4.js" type="text/javascript"></script>
<script src="/blog_article/Js/markerclusterer.js" type="text/javascript"></script>
</head>
<body>
<div id="map" ></div>
<div >
Random Weather Map
</div>
</body>
</html>

JavaScript文件js_4.js代码,注释比较详细

(function() {

window.onload = function() {

// 创建地图
var options = {
zoom: 12,
center: new google.maps.LatLng(22.50, 114.07),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), options);
google.maps.event.addListenerOnce(map, 'bounds_changed', function() {

// 获取地图分界线
var bounds = map.getBounds();

// 获取地图的角
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();

// 计算地图从上到下的距离
var latSpan = northEast.lat() - southWest.lat();

// 计算地图从左到右的距离
var lngSpan = northEast.lng() - southWest.lng();

// 创建数据保存Marker对象
var markers = [];

// 创建一个循环
for (var i = 0; i < 1000; i++) {

//创建随机数
var lat = southWest.lat() + latSpan * Math.random();
var lng = southWest.lng() + lngSpan * Math.random();
var latlng = new google.maps.LatLng(lat, lng);

// 创建Marker,注意它没有添加到地图上面
var marker = new google.maps.Marker({
position: latlng
});

// 将Marker添加到数组中
markers.push(marker);

}

//创建一个MarkerClusterer对象,将marker数组¦对象传递给它
var markerclusterer = new MarkerClusterer(map, markers);

});

};

})();

希望对大家有点帮助,呵呵。

本文链接


    
[2]windows下node.js之 express框架+jade模板搭建
    来源:    发布时间: 2013-10-16
 

1、node.js安装

在Windows平台部署Node.js比较容易,从0.6.1开始,Node.js在Windows平台上可直接通过.mis文件安装。

下载地址http://nodejs.org/#download 目前最新版本是 node-v0.8.3-x86.msi

文件在安装过程中已经指定了默认安装路径。

验证node.js 安装是否成功

打开cmd,直接输入node -v

2.npm安装

node安装成功后npm已经默认安装,npm可以直接安装相关扩展

验证npm是否安装成功

打开cmd,直接输入npm -v

3.express安装

打开cmd,直接输入npm install -g express

-g:在当前目录下安装express框架

验证express是否安装成功

安装完成后,关闭cmd,在重新打开

进入cmd,直接输入express -V

注意我这里用的大写V

4.用express创建项目

1).cmd进入要创建项目的目录,直接输入 express testapp(项目名称)

2)cd testapp   //进入刚新建的站点目录

3)cmd app  //再次进入刚创建的项目 输入npm install

完后你会发现你站点目录(这里为c:\documetns and settings\Administrator)下多了 node_modules,这个目录就是扩展库文件

express本来默认提供的引擎是jade模板引擎,它颠覆了传统的模板引擎,制定了一套完整的语法用来生产HTML的每个标签,功能强大但是不易学习,所以使用ejs模板,语法与asp、jsp和php一样,易于学习。如果要换模板引擎的话,可以通过编辑 package.json来实现

现在cmd到项目目录下运行node app.js

打开浏览器 http://127.0.0.1:3000/就可以访问了,到此环境搭建完成,开始新的旅程吧。

下一步我们选择开发IDE工具,这里选用webstorm.教程见:http://www.cnblogs.com/enix/archive/2012/04/29/2475983.html

======================================================

想看文档教程神马的,请到官网:

http://expressjs.com

Express的源码托管在这里:

https://github.com/visionmedia/express

Express使用了Connect中间件,Connect的文档在这里:

http://senchalabs.github.com/connect/

如果你想做单元测试,可以看看TDD框架Expresso:

http://visionmedia.github.com/expresso/

Express可选的Jade模板引擎也挺有趣的,它和haml是亲戚,像是个HTML预编译器:

http://jade-lang.com/

说到haml,你也可以了解下sass,它像一个CSS预编译器:

https://github.com/visionmedia/sass.js

不过同类产品中,我更喜欢不那么激进的less:

https://github.com/cloudhead/less.js

汗~我严重跑题了,本来只想简单介绍下Express的。

最后,node.js是以上各种玩意儿跑起来的前提:

http://nodejs.org/

本文链接


    
[3]JavaScript中“基本类型”之争
    来源:    发布时间: 2013-10-16

前端面试中常被问到的问题之一就是“JavaScript的基本类型有几种?”。

有的回答“数字、字符串、布尔”,有的可能会再加上“Null、Undefined”。而有人可能认为“object”也是基本类型。到底是什么样呢?

 

所谓“基本类型(primitive types)”的概念ECMAScript(V3,V5)中压根就没有,它只是将类型分为6种。

ECMAScript只提到类型,用types表示,在V3,V5整个文档搜关键字“primitive”也没见“primitive type”,“primitive value”倒是有,如true/false/0-9等。这说明规范压根就没有所谓的“基本类型”、“原始类型”一说(primitive types)。如果非要说有那么object明显也是,即有6种基本类型。

 

一些书籍却经常使用这个概念,如《JavaScript高级程序设计》第一版、第二版,第三版。

第一版提到有5种原始类型,即Undefined、Null、Boolean、Number、String

第二版和第三版又搞出了个simple data type,翻译为简单数据类型(也称为基本数据类型),称对象为复杂数据类型。

 

另一本经典书《JavaScript权威指南(第6版)》第3章也提到了primitive types

先分为基本类型(primitive types)和对象类型,基本类型又分为数字,字符串,布尔,及两个特殊null,undefined。

 

5年前JavaScript方面的书籍还很少,这两本书就是其中之二,影响也很大,可谓经典。因此受此影响的JSer不乏少数。我想书作者把语言类型分为基本类型(元类型)和对象类型(复杂类型)也是符合学习逻辑的,复杂类型由简单类型组合而成。另外也是受到其它语言如Java的影响,它们也是把类型分为基本类型(8种)和对象类型。

但ECMAScript中没有所谓的primitive types,就好比它没有类(class)的概念一样(具有其它语言能力的人仍然喜欢在JavaScript使用名词“类”)。它里面提到的就是类型,可以把它理解成基本类型,但也应该是6种。这里的基本类型也不是Java中的基本类型,因为它包含了复杂数据类型-对象。

 

不是所有的书都认为JavaScript中基本类型只有5种(不包括对象),《JavaScript语言精髓与编程实践》认为是6种,如下

它没有将null归为其中,却增加了function类型。 噢,千奇百怪的答案都有,下次再有人问这个问题如何作答呢?

 

本文链接


    
最新技术文章:
▪css white-space:nowrap属性用法(可以强制文字不...
▪IE里button设置border:none属性无效解决方法
▪border:none与border:0使用区别
▪html清除浮动的6种方法示例
▪三个不常见的 HTML5 实用新特性简介
▪css代码优化的12个技巧
▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr...
▪ie6,ie7,ie8完美支持position:fixed的终极解决方案
▪小技巧处理div内容溢出
▪html小技巧之td,div标签里内容不换行
▪纯CSS实现鼠标放上去改变文字内容
▪li中插入img图片间有空隙的解决方案
▪CSS3中Transition属性详解以及示例分享
▪父div高度不能自适应子div高度的解决方案
▪告别AJAX实现无刷新提交表单
▪从零学CSS系列之文本属性
▪HTML 标签
▪CSS3+Js实现响应式导航条
▪CSS3实例分享之多重背景的实现(Multiple background...
▪用css截取字符的几种方法详解(css排版隐藏溢...
▪页面遮罩层,并且阻止页面body滚动。bootstrap...
▪CSS可以做的几个令你叹为观止的实例分享
▪详细分析css float 属性以及position:absolute 的区...
▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
▪CSS小例子(只显示下划线的文本框,像文字一...
▪可以给img元素设置背景图
▪不通过JavaScript实现的自动滚动视差效果
▪div+CSS 兼容小摘
▪CSS的inherit与auto使用分析
 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3