一个网站的诞生08-- 在Web App嵌入地图
浏览数：21 /
时间：2015年06月11日
LBS-Location Based Service，基于位置的服务。如果要在Web App嵌入地图，差不多可以做成LBS了。zuijiancanting.com的设计理念，是把Top餐厅放在地图上，那么当你到某个地方逛逛，或者有约会，拖拉一下地图就可以找到合适的餐厅。
提供地图API服务的公司很多，国外有GoogleMap，OpenStreetMap，国内有百度地图，腾讯地图，高德地图。GoogleMap由于某些原因不能正常使用，不在选择之列。我最先考虑的是OpenStreetMap，因为除了GoogleMap之外它最有美感，www.zillow.com也是用它，地图效果很赞，在这个一切看脸的年代，外观太重要了，支持OpenSteetMap的开发库也很多，但在试验后放弃了，OpenStreetMap更适合国外的城市，中国的地图不够详细。国内的三家，百度地图，腾讯地图，高德地图，在美感上都差不多。前两家体量大，不担心产品有政策性的突变。百度地图的第三方API比较多，一些预想中的功能在第三方API都找到了，更有优势。美感，持久可用性，第三方API丰富程度，从这三个方面看，百度地图是国内最好的。第三方API和开发者的数量，是有复利效果的，一旦过了门槛其他家很难赶上。
前文说了，zuijiacanting.com的后端是tornado。百度地图嵌入页面，它的代码是javascript的，写在前端的html里。
先在一个web页面里嵌入百度地图。创建文件x.html，内容如下：
<!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=您的密钥"></script>
<title>Hello</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); // 初始化地图,设置中心点坐标和地图级别。
var marker1 = new BMap.Marker(new BMap.Point(116.384, 39.925)); // 创建标注
map.addOverlay(marker1); // 将标注添加到地图中
</script>
这个例子是百度Demo里小改来的。使用百度API之前，需要先在它家的官网注册一下，注册后会得到一个24位字符串的密钥，用它替换上文的"您的密钥"。在这个html里，先定义一个名字是"allmap"的div元素，然后在javascript创建Map，创建坐标，设置map的中心和缩放等级，然后在地图上创建一个标注Marker，所谓标注就是一个指示地点的尖底圆头图标。
在zuijiacanting.com，假如拖动地图的话，前端将计算出新地图所在矩形经纬度，然后根据经纬度的数值，用ajax调用tornado后端，获取矩形经纬度之内的Top餐厅的信息，包括餐厅的经纬度，餐厅的名字，餐厅地址等等，把餐厅绘制到当前地图上。当鼠标悬停在餐厅上的时候，地图会弹出一个小框显示餐厅名，点击餐厅，浏览器会打开大众点评网上的餐厅页面。如果鼠标悬停在右侧的餐厅名，那么左侧的地图会在餐厅的地理位置上弹出小框，显示餐厅名。
至于用ajax调用tornado后端，用jquery就行。比如，在tornado后端创建一个url路由"/getshopmarkers"，然后实现一个post方法，这个方法根据矩形经纬度从数据库查询餐厅信息，然后用json返回查询结果，那么，前端用ajax调用的方式就是：
var posting = $.post("/getshopmarkers",
{"lng_min":bssw.lng,"lng_max":bsne.lng,"lat_min":bssw.lat, "lat_max":bsne.lat,
"_xsrf":get_cookie("_xsrf")});
posting.done(function(data){
var dataObj = eval("("+data+")");
var allshopnum = dataObj[0]["allshopnum"];
dataObj.shift();
//生成marker
for(var x in dataObj){
lng = parseFloat(dataObj[x]["lng"]);
lat = parseFloat(dataObj[x]["lat"]);
var p = new BMap.Point(lng, lat);
...
}
$("#mp_content").html(newcontent);
});
posting.fail(function(){
alert("Error: can not update markers.");
});
百度地图的用法简化到最基本的东东就是这两段代码，通常来说前端同学使用百度地图没太大难度，主要是花时间熟悉API，然后设计如何用这些API构造出足够好用的特效，官方API只能保证功能可用，但不能保证美感和酷炫。在非常罕见的情况下，会遇到官方API的bug，在百度地图不提供源代码，只能绕过去或者改设计。对前端来说，设计无止境，美工无止境，速度优化无止境，浏览器兼容性无止境。千里执行，始于足下。
提供地图API服务的公司很多，国外有GoogleMap，OpenStreetMap，国内有百度地图，腾讯地图，高德地图。GoogleMap由于某些原因不能正常使用，不在选择之列。我最先考虑的是OpenStreetMap，因为除了GoogleMap之外它最有美感，www.zillow.com也是用它，地图效果很赞，在这个一切看脸的年代，外观太重要了，支持OpenSteetMap的开发库也很多，但在试验后放弃了，OpenStreetMap更适合国外的城市，中国的地图不够详细。国内的三家，百度地图，腾讯地图，高德地图，在美感上都差不多。前两家体量大，不担心产品有政策性的突变。百度地图的第三方API比较多，一些预想中的功能在第三方API都找到了，更有优势。美感，持久可用性，第三方API丰富程度，从这三个方面看，百度地图是国内最好的。第三方API和开发者的数量，是有复利效果的，一旦过了门槛其他家很难赶上。
前文说了，zuijiacanting.com的后端是tornado。百度地图嵌入页面，它的代码是javascript的，写在前端的html里。
先在一个web页面里嵌入百度地图。创建文件x.html，内容如下：
<!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=您的密钥"></script>
<title>Hello</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); // 初始化地图,设置中心点坐标和地图级别。
var marker1 = new BMap.Marker(new BMap.Point(116.384, 39.925)); // 创建标注
map.addOverlay(marker1); // 将标注添加到地图中
</script>
这个例子是百度Demo里小改来的。使用百度API之前，需要先在它家的官网注册一下，注册后会得到一个24位字符串的密钥，用它替换上文的"您的密钥"。在这个html里，先定义一个名字是"allmap"的div元素，然后在javascript创建Map，创建坐标，设置map的中心和缩放等级，然后在地图上创建一个标注Marker，所谓标注就是一个指示地点的尖底圆头图标。
在zuijiacanting.com，假如拖动地图的话，前端将计算出新地图所在矩形经纬度，然后根据经纬度的数值，用ajax调用tornado后端，获取矩形经纬度之内的Top餐厅的信息，包括餐厅的经纬度，餐厅的名字，餐厅地址等等，把餐厅绘制到当前地图上。当鼠标悬停在餐厅上的时候，地图会弹出一个小框显示餐厅名，点击餐厅，浏览器会打开大众点评网上的餐厅页面。如果鼠标悬停在右侧的餐厅名，那么左侧的地图会在餐厅的地理位置上弹出小框，显示餐厅名。
至于用ajax调用tornado后端，用jquery就行。比如，在tornado后端创建一个url路由"/getshopmarkers"，然后实现一个post方法，这个方法根据矩形经纬度从数据库查询餐厅信息，然后用json返回查询结果，那么，前端用ajax调用的方式就是：
var posting = $.post("/getshopmarkers",
{"lng_min":bssw.lng,"lng_max":bsne.lng,"lat_min":bssw.lat, "lat_max":bsne.lat,
"_xsrf":get_cookie("_xsrf")});
posting.done(function(data){
var dataObj = eval("("+data+")");
var allshopnum = dataObj[0]["allshopnum"];
dataObj.shift();
//生成marker
for(var x in dataObj){
lng = parseFloat(dataObj[x]["lng"]);
lat = parseFloat(dataObj[x]["lat"]);
var p = new BMap.Point(lng, lat);
...
}
$("#mp_content").html(newcontent);
});
posting.fail(function(){
alert("Error: can not update markers.");
});
百度地图的用法简化到最基本的东东就是这两段代码，通常来说前端同学使用百度地图没太大难度，主要是花时间熟悉API，然后设计如何用这些API构造出足够好用的特效，官方API只能保证功能可用，但不能保证美感和酷炫。在非常罕见的情况下，会遇到官方API的bug，在百度地图不提供源代码，只能绕过去或者改设计。对前端来说，设计无止境，美工无止境，速度优化无止境，浏览器兼容性无止境。千里执行，始于足下。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
