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

biyaooo

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


效果图：



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

复制代码

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

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

Masion

牛人
biyaooo眼看你成为高手

sunch

'AMap' is not defined？？？？

biyaooo

sunch 发表于 2015-4-13 17:11
'AMap' is not defined？？？？

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

q282579174

请问你这个可以获得你当前的地址信息吗

liangoxing

有百度地图的demo吗？

又帅又可爱

看着很不错的样子！顶一个

aiwex5

请问加在代码的什么位置啊，好像找不到该加在哪

名子

请问申请key的时候 发布版SHA1 是怎么申请的
我电脑里装了android的sdk会影响到么