javaweb中使用百度、谷歌地圖進行定位

時間 2019-11-10

標籤 javaweb 使用百度谷歌地圖進行定位欄目 Java 简体版

原文原文鏈接

以前給一個公司作了一個定位，調用一個接口得到經緯度，而後在地圖上顯示，javascript

以前我作了三種顯示，百度、谷歌、搜狗，搜狗和百度相似，這裏就介紹百度和谷歌了，css

以前咱們在一個城市裏面坐了測試，不必定很準確，可是比較出來的結果是html

就定位來講谷歌是比百度要精準的，包括一些位置的信息，都比較全，可是由於谷歌在中國的處境來講，如今不少機房的服務器都把谷歌給禁用了，根據狀況來看吧！ java

第一種百度json

直接上代碼：api

<!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代碼測試

html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。