sillycat
- 浏览: 2492648 次
- 性别:
- 来自: 成都
-
文章分类
最新评论
-
nation：
你好，在部署Mesos+Spark的运行环境时，出现一个现象， ...
Spark(4)Deal with Mesos -
sillycat：
AMAZON Relatedhttps://www.godad ...
AMAZON API Gateway(2)Client Side SSL with NGINX -
sillycat：
sudo usermod -aG docker ec2-use ...
Docker and VirtualBox(1)Set up Shared Disk for Virtual Box -
sillycat：
Every Half an Hour30 * * * * /u ...
Build Home NAS(3)Data Redundancy -
sillycat：
3 List the Cron Job I Have>c ...
Build Home NAS(3)Data Redundancy
SuperPlan(5)TaoBao Winner - UI - Google Map
9. Google Map
9.1 Reference URL
https://developers.google.com/maps/documentation/javascript/reference
9.2 Obtaining an API Key
Visit https://code.google.com/apis/console
Click the [Services]
Find [Google Maps API v3] and [Google Maps API v2] and turn them on.
[API Access] ---> [Simple API Access] ---> [Key for browser apps(with referers)]
9.3 Simple Map Example
A demo file named googlemap_simple_map.html
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html,body,#map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(30.243089,-97.798446),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
When we load the body page, we will initialize the map. The ZOOM control the big or small, and longitude and latitude control the location.
We use this script to add the google map API
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=asdfasdfasdf"></script>
Key is the GOOGLE map key we get from the previous steps.
Asynchronously Loading the API
Use the loadScript method to asynchronously load the API script with a callback method. Sample in googlemap_simple_asynchronous.html
<script>
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(30.243089,-97.798446),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
function loadScript(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=My_KEY&sensor=true&callback=initialize";
document.body.appendChild(script);}
window.onload = loadScript;
</script>
Map Types
ROADMAP displays the normal, default 2D tiles of Google Maps.
SATELLITE displays photographic tiles.
HYBRID
TERRAIN displays physical relief tiles for displaying elevation and water features.
9.4 Add Marker and Info
Some related class
https://developers.google.com/maps/documentation/javascript/reference#InfoWindow
https://developers.google.com/maps/documentation/javascript/reference#Marker
https://developers.google.com/maps/documentation/javascript/reference#MapsEventListener
The example file named googlemap_marker_info.html is as follow:
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(30.243089,-97.798446);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Information Box Content
var InfoBoxContent = '<div id="infoboxcontent">' +
'<h1>Hello World!</h1><p>Example link <a href="http://sillycat.iteye.com">Blog</a></p>' +
'<img width="240" height="180" src="http://dl.iteye.com/upload/picture/pic/84931/18cd6d9d-1905-35d8-a9e2-b4f5d7b59eb4.jpg" >' +
'</div>';
//InfoWindow
var InfoBox_1 = new google.maps.InfoWindow({
content: InfoBoxContent
});
var InfoBox_2 = new google.maps.InfoWindow({
content: InfoBoxContent
});
// Markervar marker_latlng_1 = new google.maps.LatLng(30.243416,-97.813464);var marker_1 = new google.maps.Marker({position: marker_latlng_1, map: map,title:"Park 1"});
var marker_latlng_2 = new google.maps.LatLng(30.241691,-97.794784);var marker_1 = new google.maps.Marker({position: marker_latlng_2, map: map,title:"Park 2"});
// Click marker to open information boxgoogle.maps.event.addListener(marker_1, 'click', function() {InfoBox_1.open(map, marker_1);});
google.maps.event.addListener(marker_2, 'click', function() {InfoBox_2.open(map, marker_2);});
}
function loadScript(){var script = document.createElement("script");script.type = "text/javascript";script.src = "http://maps.googleapis.com/maps/api/js?key=MY_KEY&sensor=true&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
It is working, it is really easy since this is a well documented open API.
10. Backbone
come soon
References:
BackBone
http://dailyjs.com/2012/11/29/backbone-tutorial-1/
http://www.youtube.com/watch?v=HsEw2i4wQMM
https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/videos/beginner
http://backbonejs.org/#introduction
http://coenraets.org/blog/2012/02/sample-app-with-backbone-js-and-twitter-bootstrap/
google map
https://github.com/eschwartz/backbone.googlemaps
http://gmaps-samples-v3.googlecode.com/svn/trunk/toomanymarkers/toomanymarkers.html
http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/smartinfowindow.html
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
https://developers.google.com/maps/documentation/javascript/tutorial
examples
http://g-hk.org/web-programming/google-maps-api-examples/
Basic Examples
https://developers.google.com/maps/documentation/javascript/examples/map-simple-async
https://developers.google.com/maps/documentation/javascript/examples/map-simple
Marker and Info
http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/smartinfowindow.html
https://developers.google.com/maps/documentation/javascript/reference#InfoWindow
9. Google Map
9.1 Reference URL
https://developers.google.com/maps/documentation/javascript/reference
9.2 Obtaining an API Key
Visit https://code.google.com/apis/console
Click the [Services]
Find [Google Maps API v3] and [Google Maps API v2] and turn them on.
[API Access] ---> [Simple API Access] ---> [Key for browser apps(with referers)]
9.3 Simple Map Example
A demo file named googlemap_simple_map.html
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html,body,#map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(30.243089,-97.798446),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
When we load the body page, we will initialize the map. The ZOOM control the big or small, and longitude and latitude control the location.
We use this script to add the google map API
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=asdfasdfasdf"></script>
Key is the GOOGLE map key we get from the previous steps.
Asynchronously Loading the API
Use the loadScript method to asynchronously load the API script with a callback method. Sample in googlemap_simple_asynchronous.html
<script>
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(30.243089,-97.798446),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
function loadScript(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=My_KEY&sensor=true&callback=initialize";
document.body.appendChild(script);}
window.onload = loadScript;
</script>
Map Types
ROADMAP displays the normal, default 2D tiles of Google Maps.
SATELLITE displays photographic tiles.
HYBRID
TERRAIN displays physical relief tiles for displaying elevation and water features.
9.4 Add Marker and Info
Some related class
https://developers.google.com/maps/documentation/javascript/reference#InfoWindow
https://developers.google.com/maps/documentation/javascript/reference#Marker
https://developers.google.com/maps/documentation/javascript/reference#MapsEventListener
The example file named googlemap_marker_info.html is as follow:
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(30.243089,-97.798446);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Information Box Content
var InfoBoxContent = '<div id="infoboxcontent">' +
'<h1>Hello World!</h1><p>Example link <a href="http://sillycat.iteye.com">Blog</a></p>' +
'<img width="240" height="180" src="http://dl.iteye.com/upload/picture/pic/84931/18cd6d9d-1905-35d8-a9e2-b4f5d7b59eb4.jpg" >' +
'</div>';
//InfoWindow
var InfoBox_1 = new google.maps.InfoWindow({
content: InfoBoxContent
});
var InfoBox_2 = new google.maps.InfoWindow({
content: InfoBoxContent
});
// Markervar marker_latlng_1 = new google.maps.LatLng(30.243416,-97.813464);var marker_1 = new google.maps.Marker({position: marker_latlng_1, map: map,title:"Park 1"});
var marker_latlng_2 = new google.maps.LatLng(30.241691,-97.794784);var marker_1 = new google.maps.Marker({position: marker_latlng_2, map: map,title:"Park 2"});
// Click marker to open information boxgoogle.maps.event.addListener(marker_1, 'click', function() {InfoBox_1.open(map, marker_1);});
google.maps.event.addListener(marker_2, 'click', function() {InfoBox_2.open(map, marker_2);});
}
function loadScript(){var script = document.createElement("script");script.type = "text/javascript";script.src = "http://maps.googleapis.com/maps/api/js?key=MY_KEY&sensor=true&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
It is working, it is really easy since this is a well documented open API.
10. Backbone
come soon
References:
BackBone
http://dailyjs.com/2012/11/29/backbone-tutorial-1/
http://www.youtube.com/watch?v=HsEw2i4wQMM
https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/videos/beginner
http://backbonejs.org/#introduction
http://coenraets.org/blog/2012/02/sample-app-with-backbone-js-and-twitter-bootstrap/
google map
https://github.com/eschwartz/backbone.googlemaps
http://gmaps-samples-v3.googlecode.com/svn/trunk/toomanymarkers/toomanymarkers.html
http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/smartinfowindow.html
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
https://developers.google.com/maps/documentation/javascript/tutorial
examples
http://g-hk.org/web-programming/google-maps-api-examples/
Basic Examples
https://developers.google.com/maps/documentation/javascript/examples/map-simple-async
https://developers.google.com/maps/documentation/javascript/examples/map-simple
Marker and Info
http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/smartinfowindow.html
https://developers.google.com/maps/documentation/javascript/reference#InfoWindow
分享到：
发表评论
-
Stop Update Here
2020-04-28 09:00 270I will stop update here, and mo ... -
NodeJS12 and Zlib
2020-04-01 07:44 435NodeJS12 and Zlib It works as ... -
Docker Swarm 2020(2)Docker Swarm and Portainer
2020-03-31 23:18 319Docker Swarm 2020(2)Docker Swar ... -
Docker Swarm 2020(1)Simply Install and Use Swarm
2020-03-31 07:58 331Docker Swarm 2020(1)Simply Inst ... -
Traefik 2020(1)Introduction and Installation
2020-03-29 13:52 297Traefik 2020(1)Introduction and ... -
Portainer 2020(4)Deploy Nginx and Others
2020-03-20 12:06 383Portainer 2020(4)Deploy Nginx a ... -
Private Registry 2020(1)No auth in registry Nginx AUTH for UI
2020-03-18 00:56 381Private Registry 2020(1)No auth ... -
Docker Compose 2020(1)Installation and Basic
2020-03-15 08:10 337Docker Compose 2020(1)Installat ... -
VPN Server 2020(2)Docker on CentOS in Ubuntu
2020-03-02 08:04 405VPN Server 2020(2)Docker on Cen ... -
Buffer in NodeJS 12 and NodeJS 8
2020-02-25 06:43 342Buffer in NodeJS 12 and NodeJS ... -
NodeJS ENV Similar to JENV and PyENV
2020-02-25 05:14 424NodeJS ENV Similar to JENV and ... -
Prometheus HA 2020(3)AlertManager Cluster
2020-02-24 01:47 369Prometheus HA 2020(3)AlertManag ... -
Serverless with NodeJS and TencentCloud 2020(5)CRON and Settings
2020-02-24 01:46 300Serverless with NodeJS and Tenc ... -
GraphQL 2019(3)Connect to MySQL
2020-02-24 01:48 214GraphQL 2019(3)Connect to MySQL ... -
GraphQL 2019(2)GraphQL and Deploy to Tencent Cloud
2020-02-24 01:48 399GraphQL 2019(2)GraphQL and Depl ... -
GraphQL 2019(1)Apollo Basic
2020-02-19 01:36 283GraphQL 2019(1)Apollo Basic Cl ... -
Serverless with NodeJS and TencentCloud 2020(4)Multiple Handlers and Running wit
2020-02-19 01:19 274Serverless with NodeJS and Tenc ... -
Serverless with NodeJS and TencentCloud 2020(3)Build Tree and Traverse Tree
2020-02-19 01:19 268Serverless with NodeJS and Tenc ... -
Serverless with NodeJS and TencentCloud 2020(2)Trigger SCF in SCF
2020-02-19 01:18 256Serverless with NodeJS and Tenc ... -
Serverless with NodeJS and TencentCloud 2020(1)Running with Component
2020-02-19 01:17 244Serverless with NodeJS and Tenc ...
相关推荐
作为一种广泛存在于各个领域的竞争现象，关于赢者通吃（winner-take-all）的大部分研究太复杂以至于难以很好地理解该现象。为了用简单的方式解释winner-take-all现象，提出了一个改进的winner-take-all模型，由离散...
SOM网络即自组织特征映射网络，采用竞争学习规则——Winner-Take-All 。网络的输出神经元之间相互竞争以求被激活，结果在每一时刻只有一个输出神经元被激活。这个被激活的神经元称为竞争获胜神经元，而其它神经元的...
WINNER-II场景下的信道仿真模型，可用于分析各个场景下的信道参数
SCM WINNER II Channel Models, D1.1.2 V1.2, IST-4-027756 WINNER II Deliverable
此 ALF Winner 指标通过建立在 -50/ 50 级别的翻转区域识别趋势变化。
WINNER II信道模型的建模与仿真 绍WINNER II信道模型所支持的场景，信道建模方法及信道参数和信道系数产生.
维纳滤波器的AR参数仿真，用于分析各参数对滤波器性能影响
winner2信道模型仿真了3D信道模型，里面涉及好多应用场景。可以与现实生活中的场景相匹配
#资源达人分享计划#
ZS-Young-Data-scientist-2018-Winner-Solution-rank-3：ZS年轻数据科学家挑战赛2018
默认情况下，winner-mode 包含在 emacs 中，因为版本 20 但它没有启用。 这是一个制作支持微功能的包的实验。 我有一段时间的想法，我终于要测试了。 安装 这个包裹是果酱。 从果酱安装它 package-install winner-...
冠军得主，鸡肉晚餐！ :rooster: 输入列表并旋转方向盘，即可每次获得随机赢家。 :crystal_ball: 目录 特征 输入名称或对象列表。 编辑并删除您的列表。 始终使用localStorage访问您最近创建的列表。...
脆皮章鱼获胜者客户 HTML 5 Phaser客户端，用于crispy-octo-winner
比较每个框架的活跃开发的标准将基于以下内容： 仓库观察者仓库叉开放式问题技术该应用程序使用以下技术： React + Redux 节点+ Express Neo4J +密码Material.ui Github API 赫鲁库安装要将应用程序安装在您的本地...
组合拍卖中的获胜者确定问题项目电子商务
世界高尔夫协会工作流程
优胜者选择引擎 示例 React.js 项目 -> 按照 用法 要跟随本文，请克隆此存储库（请参阅下文以了解运行情况）并从master分支工作。 如果要查看完成的版本，请查看finished分支： git checkout finished ...
#INNOWASTEInnoWaste赢得了Technica 2021的一等奖，价值25000卢比我们的应用视频链接- 在这里签出网站- 轨迹：增强创新能力主要思想InnoWaste项目专注于家庭和公共废物的管理。 这个想法将激励人们节省固体废物，并...
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何...
本指标定义了当市场变得不对称并且出现强大的趋势改变的力矩