var map = new BMap.Map("container"); // 创建地图实例
map.addControl(new BMap.NavigationControl());//地图控制插件,该插件可以控制地图的位置地图的显示比例
map.addControl(new BMap.ScaleControl());//显示在地图下方,告诉你地图上1cm对应的真实距离
//map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());//地图的显示类型:包括地图和卫星
map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));//地图|混合
//创建地图函数:
function createMap(){
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(113.263865,23.151257);//定义一个中心点坐标,这里是初始
化要显示的经度和纬度,可到http://openapi.baidu.com/map/createMap.html查看自己要显示的值。
map.centerAndZoom(point,12);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
}
//地图事件设置函数:
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
}
// 编写自定义函数,创建标注:
function addMarker(point, index) {
var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25), // 指定定位位置
imageOffset: new BMap.Size(0, 0 - index * 25) // 设置图片偏移
});
var marker = new BMap.Marker(point, { icon: myIcon });
map.addOverlay(marker);
}
//添加覆盖物:
//添加覆盖物 function addCoverObj(obj,flag){ var gc = new BMap.Geocoder(); var iconImg= new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), { offset: new BMap.Size(10, 25), // 指定定位位置 imageOffset: new BMap.Size(0, 0 - index * 25) // 设置图片偏移 }); var mypoint=new BMap.Point(obj.longitude_point, obj.dimensionality_point); allpoints.push(mypoint); var marker = new BMap.Marker(mypoint,{icon:iconImg}); var label = new BMap.Label(obj.car_num,{"offset":new BMap.Size(15,-15)}); label.setStyle({ //给label设置样式,任意的CSS都是可以的 //fontSize:"14px", //字号 border:"0", //边 height:"23px", //高度 width:"72px", //宽 textAlign:"center", //文字水平居中显示 lineHeight:"23px", //行高,文字垂直居中显示 background:"url(../images/mapicon/y_bg.png) no-repeat" //背景图片,这是房 产标注的关键! //cursor:"pointer" }); label.setStyle({"padding": "2px"}); // 如果子节点存在且数量大于1的显示数字 if(obj.count&&obj.count>0) { var cids = obj.childrenIds; if(flag==1){//运输公司 label = new BMap.Label(("<b><a style='text-decoration: none' href='javascript:void(0);' onclick='getCarListInRange("+obj.company_id+", \""+obj.company_name+"\",\""+cids+"\")'> "+(obj.count +1)+" </a></b>"),{"offset":new BMap.Size(25,-25)}); }else if(flag==2){//建筑工地 label = new BMap.Label(("<b><a style='text-decoration: none' href='javascript:void(0);' onclick='getCarListInBSRange(\""+cids +"\")'> "+(obj.count+1)+" </a></b>"),{"offset":new BMap.Size(25,- 25)}); }else if(flag==3){//运行车辆 label = new BMap.Label(("<b><a style='text-decoration: none' href='javascript:void(0);' onclick='getCarListOnLineRange(\""+cids +"\")'> "+(obj.count+1)+" </a></b>"),{"offset":new BMap.Size(25,- 25)}); } label.setStyle({ //给label设置样式,任意的CSS都是可以的 //fontSize:"14px", //字号 border:"0", //边 height:"33px", //高度 width:"37px", //宽 textAlign:"center", //文字水平居中显示 lineHeight:"33px", //行高,文字垂直居中显示 background:"url(../images/mapicon/y.png) no-repeat" //背景图片, 这是房产标注的关键! //cursor:"pointer" }); } //添加车牌标签 marker.setLabel(label); label.setStyle({ borderColor:"#808080", color:"#333" //cursor:"pointer" }); //添加监听 if(!obj.count||obj.count==0) { marker.addEventListener("click",function(){ //this.openInfoWindow(createInfoWindow(obj)); // 存在子节点,显示列表(可链接到其他节点) //获取地址信息 gc.getLocation(mypoint, function(rs){ showLocationInfo(marker,obj,rs); }); }); } //将标注添加到地图上 map.addOverlay(marker); }
地图常用组件:
<script type="text/javascript"> var map = new BMap.Map("milkMap"); // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 16); // 初始化地图,设置中心点坐标和地图级别 map.addControl(new BMap.OverviewMapControl({isOpen:1})); //为地图添加鹰眼 //map.addControl(new BMap.NavigationControl()); //为地图添加鱼骨(默认) map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL})); //为地图添加鱼骨(迷你型) //map.addControl(new BMap.ScaleControl()); //添加一个带上偏移量的比例尺 map.addControl(new BMap.ScaleControl({offset: new BMap.Size(5, 40)})); //添加一个带上偏移量的比例尺 map.addControl(new BMap.MapTypeControl()); //为地图添加2D3D切换控件 map.setCurrentCity("北京"); // 仅当设置城市信息时,MapTypeControl的切换功能才能可用 var myCopyright = new BMap.CopyrightControl({offset: new BMap.Size(82, 0)}) //设置版权信息偏移量 map.addControl(myCopyright); //为地图添加版权控件 myCopyright.addCopyright({id : 1, content : '<a style="line-height:30px;height:30px;display:block;color:red;background:yellow" href="http://www.cnblogs.com/milkmap/"><img src="http://www.ui-love.com/static/img/uiico.ico" />酸奶小妹的博客园</a>'}); </script>
相关推荐
在VS上使用百度地图实现的例程,提供常用操作演示,包括地图显示以及标识。
地图插件,坐标附近环境配置
Cesium 常用地图纠偏 百度、高德、Arcgis、腾讯地图纠偏 资源预览:http://dongnan185.com:8083/videos/jiupian.mp4 启动:npm i npm run serve
百度地图地方小吃搜索简介 度娘搜搜网根据研究百度地图搜索API的一些心得,实现度娘百度地图搜索api-智能地方小吃搜索PHP源码,以百度地图搜索API范例的方式发布,,并且不断更新中,度娘地方小吃地图搜索的功能...
百度地图开发代码示例集合,包括标注、坐标、右键菜单、放大缩小、自定义控件、常用控件、各种搜索查询、画多边形
基于安卓百度地图的定位开发
其中最常用的是高德地图服务(阿里)和百度地图服务。 高德地图,2002年成立,为国家或车企业等提供服务,后被阿里集团全资收购。 百度地图,2005年推出,19年成为中国最大智能化位置服务平台 。 技术使用: ...
百度地图离线函数API,包括常用函数,适用用于内网.需要自己下载瓦片图
百度地图接口文档,包含反向划分行政区,地图标点,常用接口,包含demo
百度离线地图瓦片抓取工具(支持15级以上的瓦片抓取)+Demo,直接运行就可用,内含常用工具类
1.集成百度地图SDK常用功能,如实时导航、距离计算、实时交通等功能。 2.支持android6.0权限处理,同时也兼容8.0权限处理。
百度地图工具类:将地图移动到一个经纬度位置,将坐标收藏到收藏夹的工具类
常用的百度地图功能汇总,输入自己的key就可以运行编译
利用百度地图api,实现工业常用监控的显示效果。 利用API的JS脚本。可以在应用程序里实现: 1 地图的切换 缩放等级的修改 2 增加删除站点 3 可拖动站点位置 并获取站点新位置 供监控系统记录。 4 可更改站点名称、...
百度地图简单的定位,把经纬度和当前的地址打印出来,这个功能很常用
的方式把常用的数据源下载成相应软件的离线地图文件,这样的话你的手机在没有联网的情况下,也 能显示完整的地图了。它支持的数据源有很多,包括 Google Maps、Bing Maps、Yahoo Maps、Microsoft Maps、OpenStreet...
百度地图的详细使用方法,内含方法API,以及10多种常用地图使用的例子源码,基本可以满足常用地图需求。
加载百度地图 //注意将map的crs赋值 crs: L.CRS.Baidu 详情请阅读示例页面 var map = L.map('map', { crs: L.CRS.Baidu, minZoom: 3, maxZoom: 18, attributionControl: false, center: [31.834912, 117....