起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 15531|回复: 8

WeX5中引入高德、百度地图的一个简单实例

  [复制链接]

33

主题

213

帖子

1158

积分

金牌会员

Rank: 6Rank: 6

积分
1158
QQ
发表于 2015-4-12 13:42:09 | 显示全部楼层 |阅读模式
本帖最后由 biyaooo 于 2015-4-12 19:57 编辑

和之前登录实例一样,代码我不会写, 引用了起步sxl提供的代码,我应用到了我的APP ,这里只是分享下,供更多新手学习。


效果图:
Screenshot_2015-04-12-01-32-37.jpeg


test.w 源码
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <div xmlns="http://www.w3.org/1999/xhtml" component="$UI/system/components/justep/window/window" class="window portal-main" xid="window" design="device:m;">  
  3.   <div component="$UI/system/components/justep/model/model" xid="model" style="height:auto;left:19px;top:450px;" onLoad="modelLoad">
  4.   </div>  
  5.   <div component="$UI/system/components/justep/panel/panel" class="x-panel x-full" xid="panel1">
  6.    <div class="x-panel-top" xid="top1">
  7.    <div component="$UI/system/components/justep/titleBar/titleBar" class="x-titlebar"
  8.     xid="titleBar" title="APP应用" style="background-color:black;">
  9.     <div class="x-titlebar-left" xid="div1">
  10.       <a component="$UI/system/components/justep/button/button" class="btn btn-link"
  11.         xid="menuBtn" icon="icon-navicon-round">
  12.         <i xid="i1" class="icon-navicon-round"/>  
  13.         <span xid="span1"/>
  14.       </a>
  15.     </div>  
  16.     <div class="x-titlebar-title" xid="div2">APP应用</div>  
  17.     <div class="x-titlebar-right reverse" xid="div3"/>
  18.   </div>  
  19.    </div>
  20.    <div class="x-panel-content" xid="content1"><div component="$UI/system/components/justep/contents/contents" class="x-contents x-full" active="1" xid="contents1" slidable="false">
  21.            <div class="x-contents-content" xid="content2">
  22.                     </div>
  23.   <div class="x-contents-content" xid="content3">
  24.   </div>
  25.   <div class="x-contents-content" xid="content4"></div>
  26.   <div class="x-contents-content" xid="amapContainer" onActive="mapContainerActive"></div></div></div>
  27.    <div class="x-panel-bottom" xid="bottom1"><div component="$UI/system/components/justep/button/buttonGroup" class="btn-group btn-group-justified" tabbed="true" xid="buttonGroup1" selected="gxHome">
  28.    <a component="$UI/system/components/justep/button/button" class="btn x-black btn-icon-top btn-block" label="首页" xid="gxHome" target="content2" icon="icon-home">
  29.     <i xid="i5" class="icon-home"></i>
  30.     <span xid="span6">首页</span></a>
  31.    <a component="$UI/system/components/justep/button/button" class="btn x-black btn-icon-top" xid="gxApp" target="content3" label="应用" icon="icon-social-tux">
  32.     <i xid="i6" class="icon-social-tux"></i>
  33.     <span xid="span7">应用</span></a>
  34.    <a component="$UI/system/components/justep/button/button" class="btn x-black btn-icon-top" label="测试" xid="gxStudy" target="content4" icon="icon-android-contacts">
  35.     <i xid="i7" class="icon-android-contacts"></i>
  36.     <span xid="span8">测试</span></a>
  37.    <a component="$UI/system/components/justep/button/button" class="btn x-black btn-icon-top" label="地图" xid="gxShop" target="amapContainer" icon="icon-chatbubbles">
  38.     <i xid="i8" class="icon-chatbubbles"></i>
  39.     <span xid="span9">地图</span></a> </div></div></div></div>
复制代码

test.js 代码
  1. define(function(require){
  2.         var $ = require("jquery");
  3.         var justep = require("$UI/system/lib/justep");
  4.        
  5.         var Model = function(){
  6.                 this.callParent();
  7.         };


  8.         Model.prototype.modelLoad = function(event){

  9.         };

  10.         Model.prototype.mapContainerActive = function(event){  //页面激活才加载地图
  11.                         if (!this.mapLoaded) {  //控制只加载一次
  12.                         var self = this;
  13.                         require([ "http://webapi.amap.com/maps?v=1.3&key=ff582fb8e3843cb4fa53ce591411378c" ], function() {
  14.                                 var mapObj = new AMap.Map(self.getIDByXID("amapContainer"), {   //通过XID来获取地图对象识别的ID值的加载容器
  15.                                         view : new AMap.View2D({
  16.                                                 zoom : 14,
  17.                                                 rotation : 0
  18.                                         }),
  19.                                         lang : "zh_cn"// 设置语言类型,中文简体
  20.                                 });
  21.                                 mapObj.plugin(['AMap.ToolBar'],function(){
  22.                                         //设置地位标记为自定义标记
  23.                                         var toolBar = new AMap.ToolBar();
  24.                                         mapObj.addControl(toolBar);               
  25.                                 });               
  26.                         });
  27.                         this.mapLoaded = true;
  28.                 };
  29.         };

  30.         return Model;

  31. });
复制代码



注:http://webapi.amap.com/maps?v=1. ... cb4fa53ce591411378c  为高德地图引入接口地址,key为自己的账号申请的开发key
申请好了以后,需要设置白名单才可以访问的,不然会提示出错。

引用百度的,更换这个地址就行了。对于的创建地图实例代码,百度官网的地图API有开发指南。


377

主题

2594

帖子

5117

积分

论坛元老

Rank: 8Rank: 8

积分
5117
QQ
发表于 2015-4-12 21:21:02 | 显示全部楼层
牛人
biyaooo眼看你成为高手
长春鱼熊企业管理咨询有限公司



X5开发出入库培训视频
(出处: 起步论坛)
回复 支持 反对

使用道具 举报

311

主题

944

帖子

1708

积分

金牌会员

Rank: 6Rank: 6

积分
1708
QQ
发表于 2015-4-13 17:11:01 | 显示全部楼层
'AMap' is not defined????
怒发冲冠凭栏处,潇潇雨歇,抬望眼,仰天长啸,壮怀激烈。  
三十功名尘与土,八千里路云和月,莫等闲,白了少年头,空悲切
回复 支持 反对

使用道具 举报

33

主题

213

帖子

1158

积分

金牌会员

Rank: 6Rank: 6

积分
1158
QQ
 楼主| 发表于 2015-4-13 17:18:46 | 显示全部楼层
sunch 发表于 2015-4-13 17:11
'AMap' is not defined????

你申请了自己的key没有,申请了以后,如果应用到实际还要在她们的接口后台添加域名或IP白名单
回复 支持 反对

使用道具 举报

24

主题

80

帖子

279

积分

中级会员

Rank: 3Rank: 3

积分
279
QQ
发表于 2015-5-21 09:22:58 | 显示全部楼层
请问你这个可以获得你当前的地址信息吗
回复 支持 反对

使用道具 举报

13

主题

43

帖子

147

积分

初级会员

Rank: 2

积分
147
QQ
发表于 2016-4-19 14:34:03 | 显示全部楼层
有百度地图的demo吗?
回复 支持 反对

使用道具 举报

0

主题

20

帖子

13

积分

新手上路

Rank: 1

积分
13
QQ
发表于 2016-4-28 18:42:44 | 显示全部楼层
看着很不错的样子!顶一个
回复 支持 反对

使用道具 举报

0

主题

2

帖子

6

积分

新手上路

Rank: 1

积分
6
QQ
发表于 2016-5-5 09:07:37 | 显示全部楼层
请问加在代码的什么位置啊,好像找不到该加在哪
回复 支持 反对

使用道具 举报

4

主题

12

帖子

50

积分

初级会员

Rank: 2

积分
50
QQ
发表于 2017-4-5 22:24:35 | 显示全部楼层
请问申请key的时候 发布版SHA1 是怎么申请的
我电脑里装了android的sdk会影响到么
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2024-3-29 02:07 , Processed in 0.080348 second(s), 26 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表