百度地图-放大地图

最新推荐文章于 2023-01-05 14:20:44 发布

翱翔天地

最新推荐文章于 2023-01-05 14:20:44 发布

阅读量9.8k

点赞数

本文链接：https://blog.csdn.net/you23hai45/article/details/51388383

版权

JavaScript 同时被 3 个专栏收录

243 篇文章 2 订阅

订阅专栏

HTML5

41 篇文章 0 订阅

订阅专栏

CSS3

25 篇文章 0 订阅

订阅专栏

1、问题背景

地图根据不同等级可以放大缩小，并且中心点坐标不变

2、实现源码

<!DOCTYPE html>
<html>
  <head>
    <title>放大地图</title>
	
    <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">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ak密钥"></script>
	<style>
		body,html,#map{
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0;
			font-size: 12px;
			font-family: "微软雅黑";
		}
	</style>

  </head>
  
  <body>
     <div id="map"></div>
  </body>
</html>
<script>
  //创建地图实例
  var map = new BMap.Map("map");
  //初始化地图
  map.centerAndZoom(new BMap.Point(114.309531, 30.59619),5);
  //放大到19级
  setTimeout(function(){
		map.setZoom(19);   
	}, 4000);
  //启用滚轮放大缩小
  map.enableScrollWheelZoom(true);
</script>

3、实现结果

（1）初始化时

（2）过了4s之后

4、附录

（1）缩小

<!DOCTYPE html>
<html>
  <head>
    <title>放大地图</title>
	
    <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">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ak密钥"></script>
	<style>
		body,html,#map{
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0;
			font-size: 12px;
			font-family: "微软雅黑";
		}
	</style>

  </head>
  
  <body>
     <div id="map"></div>
  </body>
</html>
<script>
  //创建地图实例
  var map = new BMap.Map("map");
  //初始化地图
  map.centerAndZoom(new BMap.Point(114.309531, 30.59619),19);
  //放大到16级
  setTimeout(function(){
		map.setZoom(5);   
	}, 4000);
  //启用滚轮放大缩小
  map.enableScrollWheelZoom(true);
</script>

（2）初始化时