zoukankan      html  css  js  c++  java
  • Adobe Edge Animate 异步条件加载框架(yepnop)应用之一:加载Google Maps

    Adobe Edge Animate --异步条件加载框架(yepnop)应用之一:加载Google Maps

    版权声明:

    本文版权属于 北京联友天下科技发展有限公司。

    转载的时候请注明版权和原文地址。

    下面将使用一个案例为大家讲解如何使用异步条件加载框架(yepnop

    一、创建工程并建立基本的一些工具,如下图:

    1.整体界面

    2.排布及命名,左侧按钮为元件:btn_googlemaps,右侧整个为元件:frame_googlemap

    3.btn_googlemaps内部元素:一个圆角长方形和文本

    4.frame_googlemap内部元素:

    map:用于显示地图

    圆角长方形:作为背景

    文本:Google Maps

    二、做完了这些,就可以开始为元件添加代码了

    1.添加frame_googlemap的控制代码,如图,进入元件,点击属性面板的Open Actions按钮,选择creationComplete

    2.添加如下代码:

    Var map = sym.$("map");   //获得元件中的元素“map”

    Var map_url = ' ';  //定义一个变量,用于存放map中显示google 地图的链接

    3.那么map_url中的内容是什么呢?我们打开谷歌地图:maps.google.com,点击分享链接,如图。

    4.复制下方<iframe>的内容到代码中

    5.如图,将数字修改为map元素的大小:

    如图,注意添加符号:

    6.将urlmap

    在浏览器中预览,可以看到我们的初步成果:加载了Google Maps

    三、接下来添加按钮功能,点击Google Maps按钮才出现右侧的谷歌地图

    1.在时间线第一帧,添加触发器(为方便往后的例子进行,这里多写一部分代码)

    2.在1秒处添加触发器,并且标签名为googlemaps

    3.为按钮btn_googlemaps添加控制代码click,并且改变鼠标手势:

    在浏览器中预览效果,如下:

    本文地址:http://www.cnblogs.com/adobeedge/archive/2012/11/30/Adobe_Edge_Animate_Google_Maps.html

    作者:北京联友天下科技发展有限公司  肖伟民

  • 相关阅读:
    禅道 之 项目开发必备
    Cmd 命令大全
    Php 性能参数优化 及 Iptables 防火墙限制用户访问平率
    Nginx 性能参数优化
    Mysql 性能调优参数
    Postfix的工作原理
    python三次输入错误验证登录
    python shopping incomplete code
    MySQL + Atlas --- 部署读写分离
    网站流量分析项目day03
  • 原文地址:https://www.cnblogs.com/adobeedge/p/Adobe_Edge_Animate_Google_Maps.html
Copyright © 2011-2022 走看看