您的位置：首页 > 移动开发 > 微信开发

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

2014-08-21 13:36 429 查看
在做微信开发的时候，很多客户要求加入地图的应用，自带的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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航