join mywedding4 phonegap 引入百度地图

最近晚上时间一直被琐事占用,项目进度好慢。跟起初定下的每天几个番茄土豆差得好远,好吧,我有严重的拖延症。Anyway,书接上文。

上次将hello word程序跑起来了,我一直不喜欢为啥每接触一个东西就给一个hello world。当然前几天swift出来的时候, 有网站给出的“hello world”是如何用swift实现flappy bird,并扬言以后flappy bird是hello world的标配。这个略nb。闲话少说,上正式内容。在刚开始的时候就想实现婚礼地点地图标注以及导航什么的功能,这个当然要借助现成的地图api。由于是面向大众的东西,不能指望大家都能在手机上访问google map,选择范围就只能是国内的百度、高德等,貌似听说有人在正式产品中用了图吧。都看了看觉得还是用百度的比较靠谱,资料也多。选好以后就正式开始了。

以我10几天闲暇时间的phonegap开发经验来说,其实用phonegap 调用百度地图就跟以前写网页版的地图应用是一样的,无非给定经纬度,在地图上加减图层就是了。关于如何添加地图标注,api文档里会有很详细的帮助与demo。使用百度api前,必须获得应用ak,这个只要申请帐号就好了,当然百度地图js api现在有了好多版本,如普通版,极速版等。在本次我们先使用普通版,当然官方说移动终端使用极速版会比较好。当然你可能会问为什么不使用极速版,其实我在点的时候选择了普通版,不要在意这些细节。。。当然在后期会考虑切换。well,talk is cheap。I’ll  show you  the code.

首先借鉴百度的demo:

<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Hello, World</title>  
<style type="text/css">  
html{height:100%}  
body{height:100%;margin:0px;padding:0px}  
#container{height:100%}  
</style>  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=你猜啊"></scrip>
</head>  
   
<body>  
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container");          // 创建地图实例  
var point = new BMap.Point(120.033436, 36.669613);  // 创建点坐标  
map.centerAndZoom(point, 30);                 // 初始化地图,设置中心点坐标和地图级别  
</script>  
</body>  
</html>

绘制地图的的过程很简单,只需要引入百度地图的js

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=是你的ak"></script>

然后指定map在哪个容器里面render就好了。是不是非常简单!当然这个只是普通的引入最最简单的地图图层。

照着这个修改phonegap下www目录的文件就好了,当然要注意这里要修改项目最顶层的www目录,因为只有在这里修改你下面的各个平台才会一同修改。

show you the code.

index.html

<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <meta name="msapplication-tap-highlight" content="no" />
        <title>Home</title>
    </head>
    <body>
        <div id="mapcontainer" style="position:absolute;width:100%;height:100%;left:0px;top:0px;margin:0px"></div>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=是你的ak"></script>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
        app.initialize();
        </script>
    </body>
</html>

请大家注意:

 <div id="mapcontainer" style="position:absolute;width:100%;height:100%;left:0px;top:0px;margin:0px"></div>

我们内嵌的style,如果不写这个的话乃的地图是看不见的,不知道为什么普通的只写个div地图不出来。这个可能跟phonegap 默认的有关,先不管细节,先实现功能。

index.js

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
        //通过百度sdk来获取经纬度,并且alert出经纬度信息
        var noop = function(){}
        window.locationService.getCurrentPosition(function(pos){
            if(pos.code==161){
                var longi = pos.coords.longitude;
                var la = pos.coords.latitude;
                createMap(longi,la); 
            }
            window.locationService.stop(noop,noop)
        },function(e){
            alert(JSON.stringify(e))
            window.locationService.stop(noop,noop)
        });
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        console.log('Received Event: ' + id);
    }
};
function createMap(longi,la){
    var map = new BMap.Map("mapcontainer");
    var center = new BMap.Point(longi, la);  // 创建点坐标  
    map.centerAndZoom(center,30);                 // 初始化地图,设置中心点坐标和地图级别 
    var here = new BMap.Marker(center);  // 创建标注
    map.addOverlay(here);              // 将标注添加到地图中
    map.addEventListener("click",function addMarker(e){
         var m = new BMap.Marker(e.point);
         map.addOverlay(m);              // 将标注添加到地图中
    });
}

关于window.locationService借鉴了http://snoopyxdy.blog.163.com/blog/static/601174402014420872345/的插件。实测定位效果真的不错。

当然这里加入了地图的click事件,在你每次点击的地方加了一个标注。

当前存在的问题,在绘制地图时指定的zoom不好用,不能使地图自动缩放。后面这点非常蛋疼。正在准备解决中。

附一张现在的结果:

phongap
应用截图

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.