您的位置：首页 > 编程语言 > Java开发

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

2017-08-30 15:31 387 查看

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

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

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

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

第一种百度

<%@ 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;">返回&
4000
lt;/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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

第一种 百度

第二种： 谷歌

第一种百度

第二种：谷歌