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

時間 2019-11-05

原文原文鏈接

第一種百度javascript

直接上代碼：css

 

<!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>

第二種：谷歌html

首先引入 <script type="text/JavaScript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>java

代碼以下 json

js代碼api

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>

相關標籤/搜索

每日一句

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