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