百度地图Api进阶教程-地图鼠标左右键操作实例和鼠标样式6.html

最新推荐文章于 2021-08-02 18:34:54 发布

原创最新推荐文章于 2021-08-02 18:34:54 发布 · 7.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#api #API #APi #地图 #百度

百度地图Api教程专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个使用百度地图API的实际案例，展示了如何通过JavaScript初始化地图、设置中心点和缩放级别，实现鼠标滚轮缩放地图的功能，并通过右键菜单实现地图的放大、缩小等操作。

Llama Factory

模型微调

LLama-Factory

LLaMA Factory 是一个简单易用且高效的大型语言模型（Large Language Model）训练与微调平台。通过 LLaMA Factory，可以在无需编写任何代码的前提下，在本地完成上百种预训练模型的微调

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度地图</title>


<script type="text/javascript">
	var iscreatr=false;
	function initialize() {
		//---------------------------------------------基础示例---------------------------------------------
		var map = new BMap.Map("allmap",{minZoom:12,maxZoom:20});            // 创建Map实例
		//map.centerAndZoom(new BMap.Point(116.4035,39.915),15);  //初始化时，即可设置中心点和地图缩放级别。
		map.centerAndZoom("成都",13);                     // 初始化地图,设置中心点坐标和地图级别。
		map.enableScrollWheelZoom(true);//鼠标滑动轮子可以滚动
		

		//---------------------------------------------鼠标右键（放大，缩小）操作---------------------------------------------
		var menu = new BMap.ContextMenu(); //右键菜单
		var txtMenuItem = [  //右键菜单项目
			{
				text:'放大',
				callback:function(){map.zoomIn()}
			},
			{
				text:'缩小',
				callback:function(){map.zoomOut()}
			},
			{
				text:'放置到最大级',
				callback:function(){map.setZoom(18)}
			},
			{
				text:'查看全国',
				callback:function(){map.setZoom(4)}
			},
			{
				text:'在此添加标注',
				callback:function(p){
				var marker = new BMap.Marker(p), px = map.pointToPixel(p);
					map.addOverlay(marker);
				}
			}
		];


		for(var i=0; i < txtMenuItem.length; i++){
			menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100)); //菜单添加项目
			if(i==1 || i==3) {
				menu.addSeparator();  //添加右键菜单的分割线
			}
		}
		 
		map.addContextMenu(menu);

		//---------------------------------------------改变鼠标样式---------------------------------------------
		//需要自己制作。cur格式的静态光标
		//map.setDefaultCursor("url('01.cur')");        //设置地图默认的鼠标指针样式 
		//map.setDraggingCursor("url('03.cur')");         //设置地图拖拽时的鼠标指针样式
	}
 
	function loadScript() {
	   var script = document.createElement("script");
	   script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize";
	   document.body.appendChild(script);
	}
 
	window.onload = loadScript;
</script>


</head>
 <body>
	<div id="r-result" style="float:left;width:100px;">打印坐标</div>
	<div id="allmap" style="width: 800px; height: 500px"></div>
</body>
</html>

<script type="text/javascript">
	// 移动到某点 map.panTo(new BMap.Point(116.409, 39.918));  
	 // map.setZoom(14);   //放到到14级
</script>

您可能感兴趣的与本文相关的镜像

Llama Factory

模型微调

LLama-Factory