详解HTML5地理定位与第三方工具百度地图的应用(2)-木庄网络博客

我们创建一个新的HTML文件，将上面这段代码复制到HTML文件中

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8"/>  
   
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=jrbPiu6jcbPsxGvdQXAc0C......">  
        //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"  
        //v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"  
    </script>  
   
    <style>  
        #container{  
            width: 800px;  
            height: 500px;  
        }  
    </style>  
</head>  
   
<body>  
<h1>使用百度地图</h1>  
<p id="container"></p>  
<script type="text/javascript">  
    // 创建地图实例，避免与Map重名，所以使用BMap.Map  
    var map = new BMap.Map("container");  
    // 创建点坐标  
    var point = new BMap.Point(113.946317,22.549008);  
    // 初始化地图，设置中心点坐标和地图级别 1~18级  
    map.centerAndZoom(point, 18);  
   
    //鼠标滚动，地图缩放  
    map.enableScrollWheelZoom(true);  
   
    //添加地图控件  
    map.addControl(new BMap.NavigationControl());  
    map.addControl(new BMap.OverviewMapControl());  
    map.addControl(new BMap.ScaleControl());  
    map.addControl(new BMap.MapTypeControl());  
   
    //添加地图标注  
    var marker=map.addOverlay(new BMap.Marker(point));  
   
      
     
   
</script>  
</body>  
</html>

使用百度地图：

OK，我们成功的在HTML文件中使用了百度地图，现在可以像在http://www.php.cn/中一样使用百度地图了！！

相关函数说明：

1 2	`<script src="http://api.map.baidu.com/api?v=2.0&ak=您的网站在百度地图申请的访问秘钥 ">` `</script>`

在ak中输入刚才得到那一长串密钥即可引用百度地图！！

创建地图实例 --必选。

var map = new BMap.Map("container");

创建一个指定的点，你的经纬度信息！！如果不知道可以使用前面的
navigator.geolocation.getCurrentPosotion方法来得到经纬度--必选。

var point = new BMap.Point(116.300982,39.915907);

以指定点为中心显示地图数字17指的是层级，层级可以分为1~18级，层级越小地图看的范围越大，层级越大看的范围越大，自己可以测试一下不同层级显示的地图效果！！---必选。

map.centerAndZoom(point, 17);

地图可以随着鼠标自由的缩放---可选。

map.enableScrollWheelZoom(true);

地图显示控件--效果自己测试，这里不是主要函数不再加以说明---可选。

map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.MapTypeControl());

地图上显示一个标注(标注)--可选

var marker=map.addOverlay(new BMap.Marker(point));

OK，第三方百度地图就说到这里，还有许多好玩的函数可以自己使用，所以方法和参数都在API中可以找到！

以上就是详解HTML5地理定位与第三方工具百度地图的应用的详细内容，更多文章请关注木庄网络博客！

返回前面的内容