.net mvc 微信开发笔记(八)------微信公共账号加入百-自学php网

.net mvc 微信开发笔记(八)------微信公共账号加入百

来源：自学PHP网时间：2015-04-14 12:58 作者：阅读:次

[导读] 在做微信开发的时候，很多客户要求加入地图的应用，自带的tx地图实在是鸡肋，谷歌又在Q外，所以研究了下百度地图。准备工作：百度地图api的key（点我申请）做微信的百度地图开...

在做微信开发的时候，很多客户要求加入地图的应用，自带的tx地图实在是鸡肋，谷歌又在Q外，所以研究了下百度地图。

准备工作：百度地图api的key（点我申请）

做微信的百度地图开发，大致有两个方向：

1、从微信获取数据后，访问百度api，返回给客户解析后的信息。

2、从微信跳转到封装好的百度地图的web界面

分析：

第一种主要调用的是百度地图http服务接口，也就是和微信接口差不多，我们给他接口发送数据，他会返回给我们相应的信息（xml/json）。举个例子：用户给公共账号发送：我在哪？后台调用api后直接返回：你在xx省xx市xx县城

第二种主要调用的是百度地图web开发接口，这个是一堆javascript代码，我们根据实际需求分拆组装js，来组成我们自己的web页面。举个例子：用户给公共账号发送：我怎么去你们公司？这时候我们给用户回复一个链接，用户点击进去之后，会自动出现地图，并在上边显示路线。

这两种各有不同，第一种方法更加灵活，但是相应的开发成本也更高。第二种方式简单，但是相对来说受到地图自己本身限制。

但是实际上第二种已经能满足大部分客户需求了，所以下边我们主要讲解第二种。

以用户获取到xx地点路线为例子

首先，设想一下，我们有一个地区很多城市的犯罪数据，另外有一张地图。如果我们把两者结合起来，是不是就能组装成一张显示该地区犯罪率分布的地图了？

这就是传说中WebService的思想，其实微信/百度lbs/黄鸡都算是WebService的一种。

扯远了，但是百度地图开发也是基于此原理，我们新建一个百度地图应用，是空的。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script>
    <title>百度地图的Hello, World</title>
    <style type="text/css">
      body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
    </style>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    /** 百度地图API功能 **/
    var map = new BMap.Map("allmap");            // 创建Map实例
    var point = new BMap.Point(116.404, 39.915); // 创建点坐标
    map.centerAndZoom(point,15);                 // 初始化地图,设置中心点坐标和地图级别。
    map.enableScrollWheelZoom();                 //启用滚轮放大缩小
</script>

这是一张空地图，我们需要做的就是在地图上添加更多的功能来满足我们的需求。

再让我们设想一下，获取用户当前到xx地的路线，大致有如下步骤。

1.先给地图设置一个点，让地图初始化。

2.获取并设置目的地的经纬度（固定值）

3.获取用户当前的经纬度（请求定位）

4.获取两点之间的路线

5.显示出来。

OK，我们现在很清楚了，需要给地图添加如下功能(参照api)

api名称：

a.用城市名字设置地图中心

b.添加鼠标缩放

c.设置目的地坐标

d.浏览器定位

e.根据其实点经纬度导航。

加入后代码大致如下：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }

        #allmap {
            height: 68%;
            width: 100%;
            float: left;
            border-bottom: 2px solid #bcbcbc;
        }

        #r-result {
            height: 30%;
            width: 100%;
            float: left;
            font-size: small;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>
    <title>浏览器</title>
</head>
<body>
    <div id="allmap"></div>
    <div id="r-result"></div>
</body>
</html>
<script type="text/javascript">

    // 设置地图中心海口
    var map = new BMap.Map("allmap");
    map.centerAndZoom("海口", 15);
    map.enableScrollWheelZoom();
    var p1;
    var p2 = new BMap.Point(110.321228, 19.91994);

    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var mk = new BMap.Marker(r.point);
            //  map.addOverlay(mk);
            //   map.panTo(r.point);

            //    alert('您的位置' + r.point.lng + ',' + r.point.lat);
            p1 = new BMap.Point(r.point.lng, r.point.lat);
            var output = "路程约为";
            var searchComplete = function (results) {
                if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
                    return;
                }

                var plan = results.getPlan(0);

                output += plan.getDistance(true) + "\n";

                output += "耗时";
                output += plan.getDuration(true) + "\n";

                //  document.getElementById("r-result").innerHTML = output + "<br/>";
                var route = plan.getRoute(0);

                // 最优路线
                var s = [];
                for (var i = 0; i < route.getNumSteps() ; i++) {
                    var step = route.getStep(i);
                    s.push((i + 1) + ". " + step.getDescription());
                    output += step.getDescription();
                }

                document.getElementById("r-result").innerHTML += s.join("<br/>");


            }
            var transit = new BMap.DrivingRoute(map, {
                renderOptions: { map: map },
                onSearchComplete: searchComplete,
                onPolylinesSet: function () {
                    // setTimeout(function(){alert(output)},"1000");
                }
            });
            transit.search(p1, "海口观澜湖旅游度假区");

        }
        else {
            alert('failed' + this.getStatus());
        }
    }, { enableHighAccuracy: true })




</script>

这就是驾车路线，还有一个公交路线，大致如下

@{
    Layout = null;
}
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }

        #l-map {
            height: 50%;
            width: 100%;
        }

        #r-result {
            height: 50%;
            width: 100%;
            overflow-y: scroll;
        }

            #r-result table {
                width: 100%;
            }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script>
    <title>展示公交换乘的结果面板</title>
</head>
<body>
    <div id="l-map"></div>
    <div id="r-result"></div>
</body>
</html>
<script type="text/javascript">

    // 百度地图API功能
    var map = new BMap.Map("l-map");            // 创建Map实例
    map.centerAndZoom("海口", 15);
    map.enableScrollWheelZoom();
    var p1;
    var p2 = new BMap.Point(110.321228, 19.91994);

    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var mk = new BMap.Marker(r.point);
            //  map.addOverlay(mk);
            //   map.panTo(r.point);

            //    alert('您的位置' + r.point.lng + ',' + r.point.lat);
            p1 = new BMap.Point(r.point.lng, r.point.lat);
          
            var searchComplete = function (results) {
                if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
                    return;
                }


            }
            var transit = new BMap.TransitRoute(map, {
                renderOptions: { map: map, panel: "r-result" }
            });
            transit.search(p1, "海口观澜湖旅游度假区");

        }
        else {
            alert('failed' + this.getStatus());
        }
    }, { enableHighAccuracy: true })
   
</script>

.net mvc 微信开发笔记(七)------微信公共账号加入小

微信公众平台开发(103) 四六级成绩查询 - 微信公

子栏目

.net mvc 微信开发笔记(八)------微信公共账号加入百

最新评论

添加评论

更多文章推荐

添加评论