wex5 3.4 百度地图2.0及页面传参分享

ludy

参考Demo地图示例，百度api，以及x5页面交互demo制作。目录说明及实现功能介绍：

1. index.w： 定义ShellImpl，采用的shell跳转。必须定义这个，不定义的话，需要使用window方法。

2. main.w：部分外卖示例的内容，放了定位功能和定义了个定位按钮，传坐标给map页面，并接收map返回的string参数，放到文本框里。如何放到外卖里，不做说明了。

3. bmap/map.w：

   1）接收main页面的参数，做了判断，有参数，按参数坐标启动地图，没有就默然启动到北京。

   2）加了城市切换（注意，百度api用2.0，1.4不支持这个方法）

   3）鼠标单击事件，并将鼠标点击的坐标，解析成地址（判断是否是直辖市，直辖市不显示省份），放到文本框里。

   4）确认使用后，将地址传参给main页面，并显示在main页面的文本框里。

   另外说明一下。如果是window跳转，或者单独打开页面，可以直接初始化示例，把请求的参数放到源文件的window下面。

示例：

.w源文件

1. <div xmlns="http://www.w3.org/1999/xhtml" xid="window" class="window" component="$UI/system/components/justep/window/window"
   
2.   design="device:m;">  
   
3.   <script src="http://api.map.baidu.com/api?v=2.0&ak=您的key"/>  
   
4.   <div component="$UI/system/components/justep/model/model" xid="model" onLoad="modelLoad"/>  

复制代码

js文件

1. Model.prototype.modelLoad = function(event) {
   
2.                 // 百度地图API功能
   
3.                 var point = new BMap.Point(116.404, 39.915);
   
4.                 map.centerAndZoom(point, 15);
   
5.                 var marker = new BMap.Marker(point);
   
6.                 map.addControl(new BMap.MapTypeControl());
   
7.                 map.enableScrollWheelZoom(true);
   
8.                 map.addOverlay(marker);
   
9. };

复制代码

如果要用shell跳转，必须要用函数请求回调。

.w文件不需要修改，直接js回调。代码贴不下。就去参考起步提供的map示例，或者我的附件。

具体原因不太清楚。估计是，直接加载或者window跳转，是从头开始启动的。所以在启动前，已经把百度的api请求加载进去了。

但是shell跳转，好像是跳过了window示例，直接调用的onModelLoad方法。所以在源码页面添加的< script />没有请求进去，就会出现BMAP没定义的错误。

另外，本来打算直接用百度地图Api的定位函数的。发现在safari浏览器正常，chrome浏览器，就会报一堆什么f.XX 没定义的错误。不知道啥原因。不搞了。

就直接使用传参了。

演示： http://2ml.bid/try

源码

try.zip (5.48 KB, 下载次数: 315)

2016-4-29 16:14 上传

点击文件名下载附件

不羁的风

谢谢分享！

请问怎么获取经纬度呀

ludy

不羁的风 发表于 2016-5-4 14:22
谢谢分享！

请问怎么获取经纬度呀

定位获取，还是地图点击获取？
我是用起步提供的baidu定位，做的。你可以直接看 外卖 的视频，学习下。
或者看我代码里面的main.js，定位按钮的locationBtnClick事件。

地图点击的话，你看下map.js，鼠标单击，我做备注了。

不羁的风

justep.Shell.closePage( inParams);

还想问一下  在关闭页面的时候可以传参吗  类似上面这种写法

不羁的风

因为打开页面传参的话   我上一页的导航栏会不见   关闭页面传参的话就不会出现这种情况  请问可以在关闭页面的时候传参吗

Masion

感谢楼主，你的实例解决了我的大问题

ecoolper

发现在safari浏览器正常，chrome浏览器，就会报一堆什么f.XX 没定义的错误

关注下requirejs，应该是js加载问题

负暄

已收藏，感谢楼主分享。

ws2588084

多谢楼主，解决了困扰着我的问题，楼主威武，这帖子不火不行