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

最新推荐文章于 2024-05-10 20:36:32 发布

严严严的博客

最新推荐文章于 2024-05-10 20:36:32 发布

阅读量826

点赞数

文章标签：地图定位

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

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

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

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

第一种百度

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>百度地图</title>
</head>
<style type="text/css">
     html{height:100%}
     body{height:100%;margin:0px;padding:0px}
     .size {
        height:100%
     }
    .changeSize{
        width:500px;
        height:500px
    }
</style>
<body>
    <h3>天气信息
        <a href="javascript:searchWeather();" id="detail"><font style="font-size:12px;vertical-align:top;">返回</font></a>
    </h3>
    <input type="text" id="cityName" style="width:300px;height:30px"/>
    <!-- <input type="button" onclick="setCity()" value="设置"  /> -->
    <button  onclick="setCity()" style="height:27px;font-size:14px">设置</button>
        <a href="javascript:void(0);"  onclick="changeSize();" id="changeSize">地图缩小</a>
    <div id="container" class = "size"></div>
</body>
<script type="text/javascript" src="${ctx}/static/plugins/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=79d13dd2c1076b1ad827484228ee4dea&v=1.1&services=true" ></script>
<script type="text/javascript">
    var ctx = "${ctx}";
    $(function () {
/*      $("#changeSize").click(function () {
             $("#container").addClass("changeSize");
        });   */   
    });
    function changeSize(){
        var msg = $("#changeSize").text();
        if("地图缩小"==msg){
            $("#container").removeClass("size");
            $("#container").addClass("changeSize");
            $("#changeSize").text("地图变大");
        }else{
            $("#changeSize").text("地图缩小");
            $("#container").removeClass("changeSize");
            $("#container").attr("class", "size");
            }
    }

    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);
    }
</script>
</html>

第二种：谷歌

首先引入

代码如下

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>

严严严的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaweb中使用百度、谷歌地图进行定位

之前给一个公司做了一个定位，调用一个接口获得经纬度，然后在地图上显示，之前我做了三种显示，百度、谷歌、搜狗，搜狗和百度类似，这里就介绍百度和谷歌了，之前我们在一个城市里面坐了测试，不一定很准确，但是比较出来的结果是就定位来说谷歌是比百度要精准的，包括一些位置的信息，都比较全，但是因为谷歌在中国的处境来说，现在很多机房的服务器都把谷歌给禁用了，根据情况来看吧！第一种百度<%@ page lan
复制链接

扫一扫