文档章节

javaweb中使用百度、谷歌地图进行定位

咖啡加糖
 咖啡加糖
发布于 2014/12/05 15:15
字数 643
阅读 38
收藏 0

之前给一个公司做了一个定位,调用一个接口获得经纬度,然后在地图上显示,


之前我做了三种显示,百度、谷歌、搜狗,搜狗和百度类似,这里就介绍百度和谷歌了,

之前我们在一个城市里面坐了测试,不一定很准确,但是比较出来的结果是


就定位来说  谷歌是比百度要精准的,包括一些位置的信息,都比较全,但是因为谷歌在中国的处境来说,现在很多机房的服务器都把谷歌给禁用了,根据情况来看吧! 


第一种  百度


直接上代码:

<!DOCTYPE>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>百度地图</title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
    <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
</head>
<body>
 
 
<input type="text" id="cityName" value="福州"/>
<input type="button" onclick="setCity()" value="查找" />
<div id="container" style="width:1024px;height:600px;"></div>
 
 
<script type="text/javascript">
    var map = new BMap.Map("container");        //在container容器中创建一个地图,参数container为div的id属性;
 
    var point = new BMap.Point(120.2,30.25);    //创建点坐标
    map.centerAndZoom(point, 14);                //初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom();                //激活滚轮调整大小功能
    map.addControl(new BMap.NavigationControl());    //添加控件:缩放地图的控件,默认在左上角;
    map.addControl(new BMap.MapTypeControl());        //添加控件:地图类型控件,默认在右上方;
    map.addControl(new BMap.ScaleControl());        //添加控件:地图显示比例的控件,默认在左下方;
    map.addControl(new BMap.OverviewMapControl());  //添加控件:地图的缩略图的控件,默认在右下方; TrafficControl    
 
    var search = new BMap.LocalSearch("中国", {
      onSearchComplete: function(result){
        if (search.getStatus() == BMAP_STATUS_SUCCESS){
          var res = result.getPoi(0);
          var point = res.point;
          map.centerAndZoom(point, 11);
        }
      },renderOptions: {  //结果呈现设置,
        map: map,  
        autoViewport: true,  
        selectFirstResult: true 
      } ,onInfoHtmlSet:function(poi,html){//标注气泡内容创建后的回调函数,有了这个,可以简单的改一下返回的html内容了。
        // alert(html.innerHTML)
      }//这一段可以不要,只不过是为学习更深层次应用而加入的。
    });
 
    function setCity(){
      search.search(document.getElementById("cityName").value);
    }
 
    search.search(document.getElementById("cityName").value);
 
 
</script>
</body>
</html>




第二种:  谷歌

首先引入  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>



代码如下  

js代码

 var myLatlng = new google.maps.LatLng(ret.attache.json.lat, ret.attache.json.lng);// 中国地图全图
 var optMap = 
{
zoom: 15,  
center: myLatlng,
streetViewControl:false,
mapTypeControl: true,
mapTypeControlOptions: {
 mapTypeIds: [/**google.maps.MapTypeId.SATELLITE ,google.maps.MapTypeId.HYBRID* */], // comment
 position: google.maps.ControlPosition.TOP_LEFT
},
// navigationControl: true,
navigationControlOptions: {
 style: google.maps.NavigationControlStyle.DEFAULT,
 position: google.maps.ControlPosition.LEFT
},
//ROADMAP SATELLITE  
mapTypeId: google.maps.MapTypeId.ROADMAP
};
     map = new google.maps.Map(document.getElementById('container'),optMap);
 map.setOptions({Zoom:18,center:myLatlng});



html

<div id="locationDiv" >
<div id="container" style="position:relative; width:450px; height:300px;"></div>
</div>


© 著作权归作者所有

咖啡加糖

咖啡加糖

粉丝 17
博文 21
码字总数 18836
作品 0
南京
程序员
私信 提问
HTML5 Geolocation API和Google Maps API结合实现路线导航

HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文结合实例给大家分享如何使用HTML5,借助百度、谷歌地图接口来...

iNiL0119
2016/09/14
103
0
iOS-定位服务与地图应用开发

iOS-定位服务与地图应用开发 Harries Blog™2017-12-192 阅读 maptaripAppIOScatAPIIOAndroid 一,定位服务 iOS设备能提供3种不同的定位途径: 1,WiFi定位,通过查询一个WiFi路由器的地理位...

Harries Blog™
2017/12/19
0
0
【iOS】苹果,百度Map定位使用与总结

iOS中使用较多的3款地图,google地图、百度地图、苹果自带地图(高德)。其中苹果自带地图在中国使用的是高德的数据。苹果在iOS 6之后放弃了使用谷歌地图,而改用自家的地图。在国内使用的较...

xn4545945
2014/08/28
0
0
百度地图SDK初步学习——环境配置

最近想在手机上开发地图,做一个TraceMe的应用。主要实现的功能是定位和追踪。 使用IDE是Intellij IDEA 12,和eclipse略有不同。 经过2天的学习,已经实现了定位的功能。 一开始想使用谷歌地...

HenryHsu
2013/12/02
0
0
Google和百度会有一战!中国的百度会是那只蚂蚁吗?

     谷歌的一辆无人驾驶汽车日前在美国加州城市芒廷维尤道路上行驶时被交警拦下,原因是车子开得太慢。虽然谷歌澄清说,出于安全和大众接受角度考虑,谷歌的无人驾驶汽车在公共道路行驶...

人工智能的小人物
2017/11/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

typescript 接口 函数类型 可索引类型

函数类型 可索引类型 数字索引签名 字符串索引签名 数字索引签名返回值 必须是 字符串索引签名返回值的子集 只读索引签名

lilugirl
今天
3
0
Oracle SQL语法实例合集

如需转载请注明出处https://my.oschina.net/feistel/blog/3052024 目的:迅速激活Oracle SQL 参考:《Oracle从入门到精通》 ------------------------------------------------------------......

LoSingSang
今天
2
0
增加 PostgreSQL 服务进程的最大打开文件数

https://serverfault.com/questions/628610/increasing-nproc-for-processes-launched-by-systemd-on-centos-7 要在systemd的配置里加才行...

helloclia
今天
2
0
组合模式在商品分类列表中的应用

在所有的树形结构中最适合的设计模式就是组合模式,我们看看常用商品分类中如何使用。 先定义一个树形结构的商品接口 public interface TreeProduct { List<TreeProduct> allProducts(...

算法之名
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部