百度地图插件的使用

爱被打了一巴掌 2021-12-11 07:09 455阅读 0赞

1、拾取坐标

[http://api.map.baidu.com/lbsapi/getpoint/index.html][http_api.map.baidu.com_lbsapi_getpoint_index.html]

2、API

[http://lbsyun.baidu.com/jsdemo.htm\#a5\_2][http_lbsyun.baidu.com_jsdemo.htm_a5_2]

3、实例

function fillbaiduMap(data){
    			var tree = $('#select').combotree('tree');
    			var node = tree.tree('getSelected');
    			// 百度地图API功能
    			var map = new BMap.Map("allmap"); // 创建Map实例,
    			//美的
    			for(var i = 0;i<data.length;i++){
    				if(data[i][3] !="" && data[i][4] !=""){
    					if(data[i][1] == node.text){
    						var point = new BMap.Point(data[i][3],data[i][4]);
    						map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
    					}
    					var markermd = new BMap.Marker(new BMap.Point(data[i][3],data[i][4]));  // 创建标注
    					var mdTitle = new BMap.Label(data[i][1], {
    					  position : new BMap.Point(data[i][3],data[i][4]),    // 指定文本标注所在的地理位置
    					  offset   : new BMap.Size(30, -30)    //设置文本偏移量
    					});  // 创建文本标注对象
    					mdTitle.setStyle({
    						color : "#fff",
    						fontSize : "12px",
    						height : "20px",
    						lineHeight : "20px",
    						fontFamily:"微软雅黑",
    						borderColor:"rgba(22,83,120,0.5)",
    						backgroundColor:"rgba(22,83,120,0.7)"
    					});
    					map.addOverlay(mdTitle);   
    					map.addOverlay(markermd); 
    					(function(i){
    						var mdinfo = {
    						  width : 300,     // 信息窗口宽度
    						  height: 60,     // 信息窗口高度
    						  title : data[i][1] , // 信息窗口标题
    						  enableMessage:true//设置允许信息窗发送短息
    						}
    						var infoWindow = new BMap.InfoWindow("用电量："+data[i][2]+"kWh", mdinfo);  // 创建信息窗口对象 
    						markermd.addEventListener("click", function(){     
    							map.openInfoWindow(infoWindow,new BMap.Point(data[i][3],data[i][4])); //开启信息窗口
    						});
    					})(i)
    				}
    			}
    			//美的
    			//添加地图类型控件
    			/*map.addControl(new BMap.MapTypeControl({
    				mapTypes: [
    					BMAP_HYBRID_MAP,
    					BMAP_NORMAL_MAP
    				]
    			}));*/
    			//markerapl.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    			map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    		}

4、效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70][]

[http_api.map.baidu.com_lbsapi_getpoint_index.html]: http://api.map.baidu.com/lbsapi/getpoint/index.html
[http_lbsyun.baidu.com_jsdemo.htm_a5_2]: http://lbsyun.baidu.com/jsdemo.htm#a5_2
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70]: /images/20211211/1ceff0fdde104e3880472b64727237ae.png

发表评论取消回复

表情：

评论列表（有 0 条评论，455人围观）

还没有评论，来说两句吧...

相关阅读

相关百度地图

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&services=true"></

电玩女神/ 2022年10月01日 03:58/ 0 赞/ 419 阅读

相关 Androida百度地图开发之显示百度地图

前提需要自己获取apikey 如果还不会获取，可参考网址: [http://blog.csdn.net/zhengyikuangge/article/details/

不念不忘少年蓝@/ 2022年09月23日 11:55/ 0 赞/ 398 阅读

相关百度地图API使用记录

背景：最近需要开发一个使用到地图的网站，对百度地图API做了些研究，记录如下使用方法： 1.引入百度脚本 <span style="

逃离我推掉我的手/ 2022年08月05日 08:16/ 0 赞/ 370 阅读

相关百度地图

百度地图Demo 详情请看 [http://lbsyun.baidu.com/index.php?title=jspopular/guide/introduction

太过爱你忘了你带给我的痛/ 2022年07月13日 10:59/ 0 赞/ 540 阅读

相关百度地图

PC端定位不准确主要应用到移动端第一、申请百度密钥很简单的几步就搞定第二、引入文件 html 代码效果预览 1 2 3 4 5

朱雀/ 2022年06月05日 04:42/ 0 赞/ 489 阅读

相关百度地图

$(function(){ var BMapInit=function(){ var map =

曾经终败给现在/ 2022年05月23日 09:57/ 0 赞/ 475 阅读

相关百度编辑器的插件使用教程

今天在做IPTV系统项目的时候，学习到了一个编辑器插件的使用，下面是其方法。感觉十分的好用。 1.在百度网页种搜索百度编辑器，然后在下载中找到该压缩包，并下载： ![

￡神魔★判官ぃ/ 2022年05月17日 00:42/ 0 赞/ 268 阅读

相关百度地图插件的使用

1、拾取坐标 [http://api.map.baidu.com/lbsapi/getpoint/index.html][http_api.map.baidu.com_lbs

爱被打了一巴掌/ 2021年12月11日 07:09/ 0 赞/ 456 阅读

相关百度地图API 加载百度地图

前言百度地图在日常生活中应用的越来越多，功能也日渐丰富，我们可以使用ArcGIS JS API加载在线百度地图（[https://blog.csdn.net/i

布满荆棘的人生/ 2021年09月15日 02:50/ 0 赞/ 841 阅读

相关百度地图API的简单使用

jsdemo：[http://lbsyun.baidu.com/jsdemo.htm\a1\_2][http_lbsyun.baidu.com_jsdemo.htm_a1_2]

男娘i/ 2021年07月26日 12:27/ 0 赞/ 577 阅读