NEW

Google 地图API Key

开始学习本教程前,你需要拥有一个免费的 Google 地图 API key。 开始学习? 开始学习本教程前,你需要在Google上申请一个指定的API key。 通过以下步骤我们可以免费获取 API key 。 访问 https://code.google.com/apis/console/, 使用你的Google账号登陆。 登陆后会出现如下界面: 点击 "Create Project" 按钮。 在服务列表中找到 Google Maps API v3, 然后点击 "off"(关闭) 让其开启该服务器 在下一...
NEW

Google Maps 基础

创建一个简单的 Google 地图 现在让我们创建一个简单的 Google 地图。 以下是显示了英国伦敦的 Google 地图: 实例 <!DOCTYPE html> <html> <head> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&callback=initMap" async defer></script> <script> function initialize() { var mapProp = { center:new ...
NEW

Google 地图

在Google地图中添加一个标记 Google 地图 - 叠加层 叠加层是地图上绑定到经度/纬度坐标的对象,会随您拖动或缩放地图而移动。 Google 地图 API 有如下几种叠加层: 地图上的点使用标记来显示,通常显示自定义图标。标记是 GMarker 类型的对象,并且可以利用 GIcon 类型的对象来自定义图标。 地图上的线使用折线(表示点的集合)来显示。线是类型为 GPolyline 的对象。 地图上的区域显示为多边形(如果是...
NEW

Google 地图事件

点击标记缩放地图 - 绑定在google地图上的事件。 点击标记缩放地图 我们仍然使用上一遍文章使用的英国伦敦的地图。 点用户点击标记时实现缩放地图的功能(点击标记时绑定地图缩放事件)。 代码如下: 实例 // Zoom to 9 when clicking on marker google.maps.event.addListener(marker,'click',function() { map.setZoom(9); map.setCenter(marker.getPosition()); }); 尝试一下 » 使用 addListener() ...
NEW

Google 地图控件集

一个Google 地图 - 默认控件集设置: Google 地图 - 默认控件集设置: 当使用一个标准的google地图,它的默认设置如下: .Zoom-显示一个滑动条来控制map的Zoom级别 .PPan-地图上显示的是一个平底碗样的控件,点击4个角平移地图 .MapType-允许用户在map types(roadmap 和 satallite)之间切换 .StreetView-显示为一个街景小人图标,可拖拽到地图上某个点来打开街景 Google 地图 - 更多控件集 除了以上默...
NEW

Google 地图类型

HYBRID类型的google地图: Google 地图- 基本地图类型 Google Maps API 中提供了以下地图类型: MapTypeId.ROADMAP,用于显示默认的道路地图视图 MapTypeId.SATELLITE,用于显示 Google 地球卫星图片 MapTypeId.HYBRID,用于同时显示普通视图和卫星视图 MapTypeId.TERRAIN,用于根据地形信息显示实际地图。 要通过 Map 修改正在使用的地图类型,您可以为其设置 mapTypeId 属性: var mapProp = { center...
NEW

Google 地图 API 参考手册

Google 地图API 参考手册 地图 构造函数/对象 描述 Map() 在指定的 HTML 容器中创建新的地图,该容器通常是一个DIV元素。 叠加层 构造函数/对象 描述 Marker 创建一个标记。 MarkerOptions 标记的选项。由DirectionsRenderer渲染的所有标记都将使用这些选项。 MarkerImage A structure representing a Marker icon or shadow image MarkerShape Defines the marker shape to use in det...
NEW

地图 API Map() 构造器

实例 创建一个 Google 地图: var map=new google.maps.Map(document.getElementById("googleMap"),mapOpt); 尝试一下 » 定义和用法 Map() 构造器创建了一个新的地图并插入到指定的HTML元素中(<div> 元素)。 语法 new google.maps.Map(HTMLElement,MapOptions) 参数值 参数 描述 HTMLElement 规定要把地图放置在那个 HTML 元素中。 MapOptions 带有地图初始化变量/选项的 MapOptions 对...

AngularJS 简介

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。 AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。 AngularJS 是一个 JavaScript 框架 AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。 AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中: <script src="https://cdn.staticfile.org/angula...

AngularJS 表达式

AngularJS 使用 表达式 把数据绑定到 HTML。 AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}。 AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。 AngularJS 将在表达式书写的位置"输出"数据。 AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。 实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }} AngularJS 实例 <!DOCTY...

AngularJS 指令

AngularJS 通过被称为 指令 的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。 AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。 ng-app 指令初始化一个 AngularJS 应用程序。 ng-init 指令初始化应用程序数据。 ng-model 指令把元素值(比如输入域的值)绑定到应用程序。 完整的指令内容可以参阅 AngularJS 参考手册。 AngularJS 实例 ...

AngularJS ng-model 指令

ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。 ng-model 指令 ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。 AngularJS 实例 <div ng-app="myApp" ng-controller="myCtrl"> 名字: <input ng-model="name"> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name...

AngularJS Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。 Scope 是一个对象,有可用的方法和属性。 Scope 可应用在视图和控制器上。 如何使用 Scope 当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递: AngularJS 实例 控制器中的属性对应了视图上的属性: <div ng-app="myApp" ng-controller="myCtrl"> <h1>{{carname}}</h1> </div> <...

AngularJS 控制器

 AngularJS 控制器 控制 AngularJS 应用程序的数据。  AngularJS 控制器是常规的 JavaScript 对象。 AngularJS 控制器 AngularJS 应用程序被控制器控制。 ng-controller 指令定义了应用程序控制器。 控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。 AngularJS 实例 <div ng-app="myApp" ng-controller="myCtrl"> 名: <input type="text" ng-model="firstName"><br&...

AngularJS 过滤器

过滤器可以使用一个管道字符(|)添加到表达式和指令中。 AngularJS 过滤器 AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式。 filter 从数组项中选择一个子集。 lowercase 格式化字符串为小写。 orderBy 根据某个表达式排列数组。 uppercase 格式化字符串为大写。 表达式中添加过滤器 过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。. (下...

AngularJS 服务(Service)

AngularJS 中你可以创建自己的服务,或使用内建服务。 什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。 AngularJS 内建了30 多个服务。 有个 $location 服务,它可以返回当前页面的 URL 地址。 实例 var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $location) { $scope.myUrl = $location.absUrl(); }); 尝试一下 » ...

AngularJS XMLHttpRequest

$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。 使用格式: // 简单的 GET 请求,可以改为 POST $http({ method: 'GET', url: '/someUrl' }).then(function successCallback(response) { // 请求成功执行代码 }, function errorCallback(response) { // 请求失败执行代码 }); 简写方法 POST 与 GET 简写方法格式: $http.get('/someUrl', config).then(successCallback, errorCa...

AngularJS Select(选择框)

AngularJS 可以使用数组或对象创建一个下拉列表选项。 使用 ng-options 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如下实例: 实例 <div ng-app="myApp" ng-controller="myCtrl"> <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"> </select> </div> <scr...

AngularJS 表格

ng-repeat 指令可以完美的显示表格。 在表格中显示数据 使用 angular 显示表格是非常简单的: AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="customersCtrl"> <table> <...

AngularJS SQL

在前面章节中的代码也可以用于读取数据库中的数据。 使用 PHP 从 MySQL 中获取数据 AngularJS 实例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table> </div> <script> var app = angular.module('myApp', []); app.controll...
Copyright © 菜鸟编程 保留所有权利.   Theme  Ality 豫ICP备15027722号 QQ:973000716

用户登录

分享到: