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

第一种  百度

直接上代码:


<!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>
时间: 05-24

javaweb中使用百度、谷歌地图进行定位的相关文章

iOS开发之地图与定位

---恢复内容开始--- 地图和定位看上去是挺高大上一东西,其实用法比TableView简单多了,下面的Demo是用的iOS中自带的地图和定位,当然了也可以用第三方的来加载地图,比如百度地图啥的,在这就不赘述了.今天的博客主要是介绍MKMapView的使用,MapView的使用和其他组件的用法差不多,MapView用的是委托回调,在使用mapView的Controller中要实现MKMapViewDelegate协议,并注册委托回调,然后实现相应的回调方法即可. 一,构建Demo的组件 为了节省

Android应用中使用百度地图API定位自己的位置(二)

官方文档:http://developer.baidu.com/map/sdkandev-6.htm#.E7.AE.80.E4.BB.8B3 百度地图SDK为开发者们提供了如下类型的地图覆盖物: 我的位置图层(MyLocationOverlay):用于显示用户当前位置的图层(支持自定义位置图标): Poi搜索结果图层(PoiOverlay):用于显示兴趣点搜索结果的图层: 路线图层(RouteOverlay):公交.步行和驾车线路图层,将公交.步行和驾车出行方案的路线及关键点显示在地图上(起.终

团队项目:安卓端用百度地图api定位显示跑道

因为安卓调用api对我来说是一个完全陌生的领域,我在经过很长时间终于弄出来了,这段时间还是很有成效的,我得到了历练. 第一步:注册成为百度开发者 在百度地图开放平台创建应用.地址http://lbsyun.baidu.com/index.php?title=首页 在电脑中找到sha1码来注册,寻找sha1码的方式,网上有教程,开始我没有用集成安卓的eclipse,用android studio.所以采用的是cmd命令台的方式查找的. 这张图片节选自网络 这是另一种方式:在eclipse中打开Wi

在网页中插入百度地图(实例)

步骤 1 2 3 如何在网页中插入百度地图呢? 2.切换城市,搜索需标注位置.(如下图 方法/步骤 1.进入:http://api.map.baidu.com/lbsapi/creatmap/(创建地图-百度地图API所见即所得工具,百度官方地址,大家放心使用) 切换城市,搜索需标注位置.(如下图:) 设置地图:大家可以对网站显示地图的宽高进行设置,其余选项不动. 添加标注:点击第一个图标后,在右侧找到自己的位置,单击鼠标左键可定位.标记图标处可更换图标形状,名称和备注填入位置相关信息.(如下图

Android中调用百度地图

一.调用百度地图 --第一种方法 1.下载百度地图SDK SDK可以拆分下载,需要使用那一部分功能就下载相应包含的SDK,如下图 核心的的jar 和so包,放在工程中的libs目录下 2.申请key 注册百度账号申请key,格式如下:sha1值+";"+包名. 包名指的是AndroidManifest.xml 中定义的名称 ,并非工程包名 3.将百度地图加入工程 (1)在application中添加开发密钥 <application   <meta-data android

在网页中加入百度地图

一.打开的图生成器 http://api.map.baidu.com/lbsapi/creatmap/ 二.创建地图 1.定位中心点,默认为北京,点击切换,输入公司的具体所在城市和具体地址.这个时候,地图会切换到该地点范围内. 2.设置地图,这一点基本上不用管,只用适当的设置下宽度和高度即可. 3.添加标注,其实网站建设者未必知道该企业的准确位置,往往不知道该标在哪.这时候,我们可以打开http://map.baidu.com/ ,查询到详细坐标,标注上去.这个标记图标是可以换的,根据自己喜欢来

Android应用中使用百度地图API并加入标注(一)

网上一些资料这样的的内容已经过时了,这里是最新的内容,假设哪里不正确,请吐槽... 1)下载百度地图移动版API(Android)开发包      要在Android应用中使用百度地图API,就须要在project中引用百度地图API开发包,这个开发包包括两个文件: 下载地址:http://pan.baidu.com/s/1i31enrB 2)申请API Key //包名 格式:比如:B7:6C:CF:E2:47:50:9B:3E:34:F7:08:72:F3:AC:F1:BE:55:D3:77

Android应用中使用百度地图API并添加标注(一)

网上一些资料这种的内容已经过时了,这里是最新的内容,如果哪里不对,请吐槽... 1)下载百度地图移动版API(Android)开发包 要在Android应用中使用百度地图API,就需要在工程中引用百度地图API开发包,这个开发包包含两个文件: 下载地址:http://pan.baidu.com/s/1i31enrB 2)申请API Key //包名 格式:例如:B7:6C:CF:E2:47:50:9B:3E:34:F7:08:72:F3:AC:F1:BE:55:D3:77:FB;com.maji

在AngularJS中使用谷歌地图把当前位置显示出来

如何使用谷歌地图把当前位置显示出来呢? --在html5中,为我们提供了navigator.geolocation.getCurrentPosition(f1, f2)函数,f1是定位成功调用的函数,f2是定位失败调用的函数,而且会把当前的地理位置信息作为实参传递给f1和f2函数.f1函数调用谷歌地图的API即可. 如何展示呢? --需要一个提示信息和展示地图的一个区域. 页面上,大致是这样: <map-geo-location height="400" width="