例子实现:在可视的区域内有1000个坐标,他们会按照一定缩放距离自动分类到一个点内,点击该分类点,显示该类所有的坐标。效果如下图:
<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代码,注释比较详细
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);
});
};
})();
希望对大家有点帮助,呵呵。
本文链接
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/
本文链接
前端面试中常被问到的问题之一就是“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类型。 噢,千奇百怪的答案都有,下次再有人问这个问题如何作答呢?
本文链接