百度地图API学习

最新推荐文章于 2023-02-16 23:49:48 发布

风中~少年

最新推荐文章于 2023-02-16 23:49:48 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/chenxue843400447/article/details/81294219

版权

最近项目需要地图定位，想到百度地图API。所以学习一下。还是很容易上手的。

首先贴出百度地图API的官网,上面有很详细的教程。

http://lbsyun.baidu.com/index.php?title=jspopular

具体详细步骤请参考官网。我记录下我自己的demo

申请完百度开发者之后,会有个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>  
<style type="text/css">  
html{height:100%}  
body{height:100%;margin:0px;padding:0px}  
#container{height:100%}  
</style>  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK">

</script>
</head>  
 
<body>  
<div id="container"></div> 
<script type="text/javascript"> 
var map = new BMap.Map("container");
// 定位并显示当前地址
//theLocation();
map.enableScrollWheelZoom(true);//启用滚轮放大缩小,默认禁用
map.enableContinuousZoom(); //启用连续缩放效果，默认禁用
map.enableInertialDragging();//启用地图惯性拖拽，默认禁用
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
var top_left_navigation = new BMap.NavigationControl({type:BMAP_NAVIGATION_CONTROL_SMALL}); //左上角，添加默认缩放平移控件
map.addControl(top_left_control);
map.addControl(top_left_navigation);
map.addControl(new BMap.OverviewMapControl()); //默认位于地图右下方，是一个可折叠的缩略地图
map.addControl(new BMap.MapTypeControl());
map.setCurrentCity("北京")
// 创建地图实例  
var point = new BMap.Point(116.404,39.915); 
// 创建点坐标  
// 初始化地图，设置中心点坐标和地图级别  
map.centerAndZoom(point, 15);

//panTo()方法将让地图平滑移动至新中心点
 window.setTimeout(function(){
	map.panTo(new BMap.Point(116.414,39.925));
}, 2000); 
// 定义一个控件类，即function 
function ZoomControl(){
	// 设置默认停靠位置和偏移量
	this.defaultAnchor=BMAP_ANCHOR_TOP_LEFT;
	this.defaultOffset=new BMap.Size(10,10);
}
// 通过JavaScript的prototype属性继承于BMap.Control   
ZoomControl.prototype = new BMap.Control();
//初始化自定义控件 自定义控件时需要实现initialize()方法，并将元素的DOM元素在该方法中返回。
ZoomControl.prototype.initialize = function(map){
	//创建一个DOM元素
    var div = document.createElement("div"); 
	div.appendChild(document.createTextNode("放大2级"));
	div.style.cursor = "pointer";
	div.style.border  = "1px solid gray";
	div.style.backgroundColor = "white";
	// 绑定事件，点击一次放大两级    
	div.onclick = function(e){
		map.zoomTo(map.getZoom() + 2);
	}
	map.getcontainer().appendChild(div);
	// 将DOM元素返回  
    return div;   
}
// 创建控件实例    
var myZoomCtrl = new ZoomControl();    
// 添加到地图当中    
map.addControl(myZoomCtrl);
</script>  
</body>  
</html>

这里有怎样创建一个简单的地图和怎样设置控件以及自定义控件。

风中~少年

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
百度地图API学习

最近项目需要地图定位，想到百度地图API。所以学习一下。还是很容易上手的。首先贴出百度地图API的官网,上面有很详细的教程。http://lbsyun.baidu.com/index.php?title=jspopular具体详细步骤请参考官网。我记录下我自己的demo申请完百度开发者之后,会有个ak密匙，这个你需要保存下来。很多地方需要用到下面进入开发：建立一个html页面...
复制链接

扫一扫