web開發調用百度地圖API + AK申請

時間 2019-11-17

標籤 web 開發調用百度地圖 api 申請欄目 HTML 简体版

原文原文鏈接

web開發調用百度地圖API + AK申請

要使用百度地圖的API咱們首先須要在咱們的html頁面引入js----``javascript

如何獲取百度地圖ak：css

1.登錄百度地圖開發者平臺
2.註冊百度開發者帳號並登錄
3.點擊進入控制檯建立應用，須要注意的是：「Referer白名單」這個字段填寫你客戶端的ip，否則最後的ak依然沒法調用，固然也能夠是網站，表明這個ak容許那些客戶端使用

基本的準備工做到這裏就結束了，下面看看調用代碼:html

<!DOCTYPE html>  
<html>
    <head>  
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <title>Hello, World</title>  
        <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
        <style type="text/css">  
            html{height:100%}  
            body{height:100%;margin:0px;padding:0px;display: flex;justify-content: center;align-items: center;}  
            #container{
                height:80%;
                border: 10px inset darkgoldenrod;
            }
        </style>  
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=">
            //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"
        </script>
    </head>  
     
    <body>  
        <div id="container" class="container"></div> 
        <script type="text/javascript"> 
            var map = new BMap.Map("container");
            // 建立地圖實例  
            var point = new BMap.Point(108.188512, 31.23829);
            // 建立點座標  
            map.centerAndZoom(point, 19);
            // 初始化地圖，設置中心點座標和地圖級別  
            map.enableScrollWheelZoom(true);
            // 滾動縮放
//          var myStyleJson=[  
//          {  
//              "featureType": "road",  
//              "elementType": "geometry.stroke",  
//              "stylers": {  
//                  "color": "#ff0000"  
//              }  
//          }];
//          map.setMapStyle({styleJson: myStyleJson }); 
            //風格
            map.addEventListener("click", function(e){    
                var lat = e.point.lat;
                var lng = e.point.lng;
                console.log('東經'+lng, '北緯'+lat);
            });
        </script>  
    </body>  
</html>

好了具體玩法參照百度地圖API就能夠了，這裏作一個記錄：老家的經緯度是（108.188512, 31.23829）java