百度Map 键盘控制 右键菜单 测距 以及各个功能应用

最新推荐文章于 2022-10-31 21:28:42 发布
原创 最新推荐文章于 2022-10-31 21:28:42 发布 · 6.1k 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
百度Map

当前文章被收录于：

百度Map
8 篇文章 0 人学习
订阅专栏 查看详情
这篇博客演示了如何使用JavaScript和百度地图API实现地图的键盘控制、右键菜单功能，以及添加标尺工具进行测距。通过示例代码，展示了创建地图、设置地图事件、添加地图控件、标注点等功能，以便用户能够更好地互动和操作地图。 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />   <!--这样做是为了让页面以正常比例进行显示并且禁止用户缩放页面的操作。-->
<title>Hello, World</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=true"></script>
</head>
<body>
<div style="width:1080px;height:600px;border:1px solid gray" id="container"></div>
<div style="position:absolute;left:1100px;top:5px" id="info"></div>
<div style="position:absolute;left:1100px;top:35px" id="results"></div>
<div style="position:absolute;left:1100px;top:320px"><br>
<input type="button" value="标尺" onclick="myDis.open()" /><input type="button" value="关闭标尺" onclick="myDis.close()" /><br />
<input type="button" value="拉框放大" onclick="myDrag.open()" /><input type="button" value="关闭拉框" onclick="myDrag.close()" />
</div>
</body> 
</html>

<script type="text/javascript">
function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMarker();//向地图中添加marker
    }
	 //创建地图函数：
    function createMap(){
        var map = new BMap.Map("container");            // 创建Map实例
		var point = new BMap.Point(108.91907,34.239102);    // 创建点坐标108.91907,34.239102
		
		var menu = new BMap.ContextMenu();					//  右键菜单
		var txtMenuItem = [
		  {
		   text:'放大',
		   callback:function(){map.zoomIn()}
		  },
		  {
		   text:'缩小',
		   callback:function(){map.zoomOut()}
		  },
		  {
		   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));
		 };
		var local = new BMap.LocalSearch("西安市", {  
		  renderOptions: {  
			map: map,
			map: map, panel: "results",			//结果集
			autoViewport: true,  
			selectFirstResult: false
		  },  
	  pageCapacity: 8  
	});  
		local.search("西安电子科技大学"); 
		
		map.centerAndZoom(point,15);                     // 初始化地图,设置中心点坐标和地图级别。
		map.addContextMenu(menu);							//添加放大缩小按钮
		map.addEventListener("click", function(e){
		  document.getElementById("info").innerHTML = e.point.lng + ", " + e.point.lat;
		});
		myDis = new BMap.DistanceTool(map);				//标尺工具
		myDrag = new BMap.DragAndZoomTool(map, {		//拖拽放大
		  followText: "拖拽鼠标进行操作"
		});
        window.map = map;//将map变量存储在全局
    }

  function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
		map.addControl(new BMap.NavigationControl());  
		map.addControl(new BMap.ScaleControl());  
		map.addControl(new BMap.OverviewMapControl());  
		map.addControl(new BMap.MapTypeControl());  
		map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用  
    }
	 //地图控件添加函数：
    function addMapControl(){
        //向地图中添加缩放控件
	var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
	map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
	var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
	map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
	var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
	map.addControl(ctrl_sca);
    }
	
	 //标注点数组
    var markerArr = [
	 {title:"达效软件",content:"西安电子科技大学远动中心",point:"108.923202|34.236991",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
	,{title:"我的标记",content:"我家",point:"108.796706|34.128354",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
	,{title:"徐家庄",content:"徐家庄",point:"108.9098|34.241669",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
	];
	
	 //创建marker
    function addMarker(){
        for(var i=0;i<markerArr.length;i++){
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0,p1);
			var iconImg = createIcon(json.icon);
            var marker = new BMap.Marker(point,{icon:iconImg});
			var iw = createInfoWindow(i);
			var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
			marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                        borderColor:"#808080",
                        color:"#333",
                        cursor:"pointer"
            });
			
			(function(){
				var index = i;
				var _iw = createInfoWindow(i);
				var _marker = marker;
				_marker.addEventListener("click",function(){
				    this.openInfoWindow(_iw);
			    });
			    _iw.addEventListener("open",function(){
				    _marker.getLabel().hide();
			    })
			    _iw.addEventListener("close",function(){
				    _marker.getLabel().show();
			    })
				label.addEventListener("click",function(){
				    _marker.openInfoWindow(_iw);
			    })
				if(!!json.isOpen){
					label.hide();
					_marker.openInfoWindow(_iw);
				}
			})()
        }
    }

	
	//创建InfoWindow   +"<div class='iw_poi_content'>"+json.content+"</div>");
	//var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象  
	//map.openInfoWindow(infoWindow, map.getCenter()); 
    function createInfoWindow(i){
        var json = markerArr[i];
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b>"
		+"<div class='iw_poi_content'><iframe  width=300px height=400px src=http://baidu.com></iframe></div>");
        return iw;
    }
    //创建一个Icon   
    function createIcon(json){
        var icon = new BMap.Icon("http://openapi.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-

json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
        return icon;
    }
	initMap();//创建和初始化地图
</script>


标签
#百度 #function #callback #button #json
#class
2025小红书爬虫还能活？破解x-s签名+动态Cookie，亲测爬1000条笔记零封禁（附逆向全过程）
最新发布
专注于Python爬虫开发，分享爬虫技巧、项目实战与反爬经验，使用Scrapy、BeautifulSoup等工具，解决数据抓取难题。
10-28 7093
上周帮美妆行业的朋友爬小红书“口红推荐”笔记，刚发30个请求就被403，抓包一看x-s签名不对；换Cookie继续爬，爬50条又被封——小红书的反爬这两年简直是“地狱模式”：动态Cookie每10分钟过期，x-s签名算法季度更新，连请求头的User-Agent顺序错了都会被拦。。这篇文章不藏私，把逆向x-s签名的全过程、动态Cookie的维护技巧、1000条稳定爬取的实战代码全给你，连我踩过的8个坑都标出来了（最后附代理池配置，IP零封禁的关键）。
百度地图开发代码集合（标注、坐标、右键菜单、常用功能）
11-13
百度地图开发代码示例集合，包括标注、坐标、右键菜单、放大缩小、自定义控件、常用控件、各种搜索查询、画多边形
百度地图给map添加右键菜单（判断是否为marker）
09-02
主要介绍了百度地图给map添加右键菜单（判断是否为marker） 的相关资料,需要的朋友可以参考下
numpy-1.20.1+mkl-cp39-cp39-win_amd64.whl
numpy-1.20.1+mkl-cp39-cp39-win_amd64.whl由于从官网下载文件较慢，所以在此提供下载，本文件对应Python39版本为轮子文件，可通过pip安装
百度地图实现 右键map，marker出现菜单
b809220024的博客
06-19 6979
判断是右键map还是marker//创建地图函数： function createMap(){ map.addEventListener("rightclick",function(e){ s = e.point.lng;//经度 w = e.point.lat;//维度 if(e.overlay){//
JS 百度地图-右键菜单
深蓝旭的博客
08-13 487
JS 百度地图-右键菜单 /*-----------------标注右键删除-------------------------*/ var markerMenu = new BMap.ContextMenu(); markerMenu.addItem(new BMap.MenuItem('删除标注 ', function () { ma...
百度地图开放平台使用教程
m0_72967249的博客
10-31 3532
百度地图平台
百度离线地图添加右键菜单
xq830210的专栏
10-20 2084
百度 离线 地图 右键 菜单
百度地图 右键菜单(MenuItem)
weixin_42448623的博客
09-09 4063
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"> <...
百度地图添加右键菜单
u014459937的专栏
05-05 1690
//在地图上添加右键菜单 //菜单初始化-------start var menu = new BMap.ContextMenu(); //右键菜单 var txtMenuItem = [  //右键菜单项目     {         text: '完成绘制',             callback: function () {           alert('完成绘制');
百度地图API的第一次接触——右键菜单
weixin_34186128的博客
03-24 802
1.初始化地图 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); window.setTimeout(function(){ map.panTo(new BMap.Point(116.409, 3...
百度地图中添加右键菜单功能
u013516331的博客
11-28 1554
右键菜单监听是绑定在map上对象，因此直接调用就可以，通过鼠标右键可以选定右键位置的坐标，与你的marker点坐标比较，如果相等，就执行相应的函数，这样就能够实现右击marker出现菜单，右击地图其他位置不执行函数的功能； map.addEventListener("rightclick",function(e){}) ...
百度地图的标记点和标记点的右键弹出菜单
remake_save的博客
08-17 571
代码】百度地图的标记点和标记点的右键弹出菜单。
百度地图Api进阶教程-地图鼠标左右键操作实例和鼠标样式6.html
过天的专栏
01-07 7890
百度地图 var iscreatr=false; function initialize() { //---------------------------------------------基础示例--------------------------------------------- var map = new BMap.Map("allmap",{minZoom:12,m
Vue Baidu Map组件封装：多边形组件和右键菜单
超频化石鱼的博客
12-19 5346
在Vue上进行开发，地图使用了百度提供的Vue Baidu Map。当前版本为v0.21.15。官方文档地址： https://dafrok.github.io/vue-baidu-map/#/zh/index 开发需求：在百度地图上动态进行多边形的显示，添加，删除，修改。 具体流程： 在地图上点右键，弹出菜单：添加多边形。点击菜单项后，进入绘制模式。 在绘制模式下，每次鼠标点击百度地图，都会在...
『实践』百度地图给多个marker添加右键菜单（删除、更新）
weixin_30667649的博客
03-03 237
js： 1 $.getJSON("./GetStationPlaceServlet",function(json){ 2 for(var i=0;i<json.length;i++){ 3 var obj1 = eval(json); 4 //获取经纬度 5 fStat...
cesium实现键盘控制地图场景漫游效果
专注GIS开发
04-24 4564
cesium实现键盘控制地图场景漫游效果
百度地图给多个marker添加右键菜单（删除、更新）
tyjlearning的博客
06-14 2779
$.getJSON("./GetStationPlaceServlet",function(json){ 2 for(var i=0;i){ 3 var obj1 = eval(json); 4 //获取经纬度 5 fStationlon = parseFloat(obj1[i].Stationlo
vue 笔记(正在补充中。。。)
bobobocai的博客
07-03 2230
Vue1x 和 Vue2x 的区别 es6语法 vue vue到底是什么 vue和angular区别 常用指令 扩展html标签功能属性 事件 属性 过渡和动画只有在定义样式的时候不一样其他的都是一样的 我是标题3 msg 标题2 httpschromegooglecomwebstoredetailvuejs-devtoolsnhdogjmej
百度地图的常用事件和方法
weixin_44860226的博客
07-06 4633
百度地图的常用事件和方法总结。涉及地图缩放、拖曳、点击等等各种常见地图操作的方法大合集
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值