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

摘要: 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>