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

最新推荐文章于 2024-01-07 21:57:20 发布

谦奕爸爸

最新推荐文章于 2024-01-07 21:57:20 发布

阅读量1.2k

点赞数

文章标签：谷歌地图百度

map 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

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

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

第一种百度

直接上代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.webapp.entity.*"%>
<%@ page import="java.util.*"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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" οnclick="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>

这个网址是百度地图免费开放的一些案例，内容非常丰富，但是有些使用是收费的，大家可以根据自己需要进行学习。
http://developer.baidu.com/map/jsdemo.htm#d0_4

谦奕爸爸

关注

0
点赞
踩
5

收藏

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

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

扫一扫