百度地图API调用

最新推荐文章于 2021-03-17 10:44:28 发布

TivonaLH

最新推荐文章于 2021-03-17 10:44:28 发布

阅读量707

点赞数

分类专栏： javaScript，Web前端文章标签： javascript 百度地图 api

本文链接：https://blog.csdn.net/TivonaLH/article/details/68065250

版权

javaScript，Web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
   
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <title>地图展示</title>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
   <style type="text/css">
	body, html,#allmap {width: 100%;height: 500px;overflow: hidden;margin:0;font-family:"黑体";}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=TBTVv2MCSc3IHDEDLMUBQmy2QeBeW5ET"></script>

  </head>
  
  <body>
    <div id="allmap"></div>
	<div><input type="text" id="maptext" style="height:20px;"/></div>
  </body>
</html>
<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);     //开启鼠标滚轮缩放

	var geolocation = new BMap.Geolocation();  //实例化浏览器定位对象。
	geolocation.getCurrentPosition(function(r){   //定位结果对象会传递给r变量
		if(this.getStatus() == BMAP_STATUS_SUCCESS){  //通过Geolocation类的getStatus()可以判断是否成功定位。
			var mk = new BMap.Marker(r.point);    //基于定位的这个点的点位创建marker
			map.addOverlay(mk);    //将marker作为覆盖物添加到map地图上
			map.panTo(r.point);   //将地图中心点移动到定位的这个点位置。注意是r.point而不是r对象。
			alert('您的位置：'+r.point.lng+','+r.point.lat);  //r对象的point属性也是一个对象，这个对象的lng属性表示经度，lat属性表示纬度。
		}
		else {
			alert('failed'+this.getStatus());
		}        
   },{enableHighAccuracy: true})
</script>

更多功能选择可以查看此链接：http://lbsyun.baidu.com/jsdemo.htm#a1_2这个是百度地图API官网，还有android和ios的API