文档章节

一个网站的诞生08-- 在Web App嵌入地图

brian_2017
 brian_2017
发布于 2017/01/17 09:42
字数 1179
阅读 11
收藏 1
LBS-Location Based Service,基于位置的服务。如果要在Web App嵌入地图,差不多可以做成LBS了。zuijiacanting.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,在百度地图不提供源代码,只能绕过去或者改设计。对前端来说,设计无止境,美工无止境,速度优化无止境,浏览器兼容性无止境。千里执行,始于足下。

© 著作权归作者所有

brian_2017
粉丝 3
博文 61
码字总数 145216
作品 0
私信 提问
移动开发的革命之路到底指向何方

纵观近两年的开发模式之争,Native与Html5党们打斗不断,论辩不止。Hybrid 开发模式的出现也并没有完全将争斗熄灭。总述原因,只有一点,在Hybrid开发模式中,是将Native和Html5的优势混合起...

wojiu9712
2016/03/26
144
0
移动开发的革命之路到底指向何方

纵观近两年的开发模式之争,Native与Html5党们打斗不断,论辩不止。Hybrid 开发模式的出现也并没有完全将争斗熄灭。总述原因,只有一点,在Hybrid开发模式中,是将Native和Html5的优势混合起...

wojiu9712
2016/03/25
2
0
开源中国社区(OsChina.NET) 8-1 资讯精彩回顾

2011-08-07 WWW 万维网二十岁生日快乐 二十年前的今天,World Wide Web 也就是我们说的万维网,或者是简称为 web 在欧洲的 CERN (欧洲核子研究中心) 诞生了。 根据万维网联盟的网站,万维网是...

小编辑
2011/08/07
1K
0
郑州java/kind

#kind kind-permission Spring+SpringMVC+MyBatis+Shiro+MySQL+Redis+Maven+EasyUI+Bootstrap实现的通用权限管理系统 ,参考了一些优秀的开源项目. 项目结构 kind-perm-commmon 项目基础架构,...

郑州java
2017/08/14
0
0
Java发展的时间表。 (版本号 名称 中文名 发布日期)

JDK 1.1.4 Sparkler 宝石 1997-09-12   JDK 1.1.5 Pumpkin 南瓜 1997-12-13   JDK 1.1.6 Abigail 阿比盖尔--女子名 1998-04-24   JDK 1.1.7 Brutus 布鲁图--古罗马政治家和将军 1998-0......

曦羽
2018/01/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud 笔记之Spring cloud config client

观察者模式它的数据的变化是被动的。 观察者模式在java中的实现: package com.hxq.springcloud.springcloudconfigclient;import org.springframework.context.ApplicationListener;i...

xiaoxiao_go
今天
4
0
CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
今天
4
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
今天
7
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
今天
7
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部