网页引入百度云地图之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>



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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值