网页引入百度云地图之JS篇

本文大致介绍一下怎么在网页中引入百度云地图，其它更多功能还等着小伙伴去探索

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。

一、去百度云API官网申请密钥

百度云API

二、将密钥写到代码中

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

三、利用 H5 获得经纬度坐标

	var x=document.getElementById("demo");
	function getLocation(){
        //检测是否支持地理定位
        if(navigator.geolocation){
          navigator.geolocation.getCurrentPosition(showPosition);          

	     }else{
            x.innerHTML="Geolocation is not supported by this  browser.";         
                  }     
         } 

	//获得并显示经度和纬度    
	function showPosition(position){
         x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; 

	｝

四、将经纬度坐标赋给百度地图API函数

<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
	map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
	map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
</script>

这样就可以在网页中插入一个最基本的地图了，还有很多其它功能等着你去使用！