百度地图添加工具条、比例尺控件

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style type="text/css">

body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}

#allmap{width:100%;height:500px;}

#r-result{width:100%;margin-top:5px;}

p{margin:5px; font-size:14px;}

</style>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

<title>添加/删除工具条、比例尺控件</title>

</head>

<body>

<div id="allmap"></div>

<div id="r-result">

<input type="button" οnclick="add_control();" value="添加" />

<input type="button" οnclick="delete_control();" value="删除" />

</div>

<p>在地图的左上、右上分别展示完整、缩略样式的缩放平移控件；同时在地图的左上方展示比例尺控件，点击按钮查看效果</p>

</body>

</html>

<script type="text/javascript">

// 百度地图API功能

var map = new BMap.Map("allmap");

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺

var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件

var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮

/*缩放控件type有四种类型:

BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/

//添加控件和比例尺

function add_control(){

map.addControl(top_left_control);

map.addControl(top_left_navigation);

map.addControl(top_right_navigation);

}

//移除控件和比例尺

function delete_control(){

map.removeControl(top_left_control);

map.removeControl(top_left_navigation);

map.removeControl(top_right_navigation);

}

</script>

百度地图添加工具条、比例尺控件相关推荐

html5 比例尺,高德地图API之缩放比例尺控件+3D转换
缩放比例尺控件首先引入控件 amap.scale 然后使用 map.addcontrol() 添加控件 map *{margin:0;padding:0;list-style: none;} #co ...
工具条内控件背景色设置
在使用工具条时,希望能够根据需要修改器中某控件(例如: toolStripLabel1)的背景色,使用直接设置背景色指令无法更改其背景色,使用Graphics重绘终于实现了背景色的修改: 代码如下: ...
04 在地图上添加主页、定位、鹰眼图和比例尺控件
在上一篇文章中我们学习了如何创建一个简单的地图,那接下来,我们学习如何给创建好的地图上添加一些基本的空间,最终效果如下图所示: 由上图可以看出,我们在地图上添加了主页.定位.鹰眼图以及比例尺控件,下面 ...
百度地图API 2014年 v3.0.0版本缩放控件、比例尺控件、指南针控件【控制方法】
// 隐藏缩放控件 int childCount = mMapView.getChildCount(); View zoom = null; for (int i = 0; i < childC ...
高德地图-缩放比例尺控件
缩放比例尺控件添加插件:plugin=AMap.scale,AMap.ToolBar; AMap.scale 比例尺插件.位于地图右下角,用户可控制其显示与隐藏. map.addControl(ne ...
Leaflet中实现添加比例尺控件与自定义版权控件与链接
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 上面加载显示 ...
vue结合百度地图绘制工具遇到的问题及解决方案(多边形编辑状态下形状显示不全、marker点添加事件无效)
vue如何引入百度地图绘制工具百度地图绘制工具示例 http://developer.baidu.com/map/jsdemo.htm#f0_7 百度地图绘制工具api文档 http://api.m ...
百度地图添加标识物，并能控制标识物显示/隐藏
百度地图添加标识物,并能控制标识物显示/隐藏 <%@ page contentType="text/html;charset=UTF-8"%> <%@ inclu ...
百度搜霸工具条出现下载任意文件执行漏洞含攻击代码
来源:http://seclists.org 百度搜霸工具条出现高危漏洞,访问恶意网页,会下载木马执行,最新版本的工具条也受漏洞影响.百度搜霸的C:/Program Files/baidubar/Ba ...

百度地图添加工具条、比例尺控件

百度地图添加工具条、比例尺控件相关推荐

最新文章

热门文章

百度地图 添加工具条、比例尺控件

百度地图 添加工具条、比例尺控件相关推荐

最新文章

热门文章

百度地图添加工具条、比例尺控件

百度地图添加工具条、比例尺控件相关推荐