调用百度地图-直观(不带导航)
2016-04-09 00:00
134 查看
摘要: 调用百度地图api
//本文来源于网络,本人总结起来并优化,分享给有需要的前端朋友,如有侵权,请联系删除,也请指正、批评
css <!--引用百度地图API--> <style> .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden; padding-right:13px;white-space:nowrap} .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px; white-space:-moz-pre-wrap;word-wrap:break-word} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
html <div class="mapBox" id="baidumapBox"></div>
js <script type="text/javascript"> //创建和初始化地图函数: function map() { createMap();//创建地图 setMapEvent();//设置地图事件 addMapControl();//向地图添加控件 addMarker();//向地图中添加marker } function map2() { createMap2();//创建地图 setMapEvent();//设置地图事件 addMapControl();//向地图添加控件 addMarker();//向地图中添加marker } function initMap() { createMap();//创建地图 setMapEvent();//设置地图事件 addMapControl();//向地图添加控件 addMarker();//向地图中添加marker } //创建地图函数: function createMap() { var map = new BMap.Map("baidumapBox");//在百度地图容器中创建一个地图 var point = new BMap.Point(113.352552, 23.17565);//定义一个中心点坐标 map.centerAndZoom(point, 19);//设定地图的中心点和坐标并将地图显示在地图容器中 window.map = map;//将map变量存储在全局 } function createMap2() { var map = new BMap.Map("baidumapBox1");//在百度地图容器中创建一个地图 var point = new BMap.Point(113.352552, 23.17565);//定义一个中心点坐标 map.centerAndZoom(point, 19);//设定地图的中心点和坐标并将地图显示在地图容器中 window.map = map;//将map变量存储在全局 } //地图事件设置函数: function setMapEvent() { map.enableDragging();//启用地图拖拽事件,默认启用(可不写) map.enableScrollWheelZoom();//启用地图滚轮放大缩小 map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写) map.enableKeyboard();//启用键盘上下左右键移动地图 } //地图控件添加函数: 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: "广州达到信息技术APP开发", content:"地址:广州市天河区长兴路5号B座203<br/>电话:020-38329755<br/>手机:13560398265", point: "113.352650|23.17540", isOpen:{isOpen:1,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}, icon: {w: 23, h: 25, l: 46, t: 21, x: 9, lb: 12} } ]; //创建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 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'>"+json.content+"</div>"); return iw; } //创建一个Icon function createIcon(json){ var icon = new BMap.Icon("http://map.baidu.com/image/us_cursor.gif", 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();//创建和初始化地图 map();//创建和初始化地图 map2(); </script>
//本文来源于网络,本人总结起来并优化,分享给有需要的前端朋友,如有侵权,请联系删除,也请指正、批评
相关文章推荐
- C#开发Android百度地图手机应用程序(多地图展示)
- 百度地图给map添加右键菜单(判断是否为marker)
- 基于OL2实现百度地图ABCD marker的效果
- JS中引用百度地图并将百度地图的logo和信息去掉
- js调用百度地图及调用百度地图的搜索功能
- 基于Arcgis for javascript实现百度地图ABCD marker的效果
- 使用百度地图api实现根据地址查询经纬度
- 百度地图API提示230 错误app scode码校验失败的解决办法
- 微信企业号开发之微信考勤百度地图定位
- 百度地图自定义控件分享
- 基于Android实现百度地图定位过程详解
- Android SDK 百度地图通过poi城市内检索简介接口的使用
- Android百度地图实现搜索和定位及自定义图标绘制并点击时弹出泡泡
- 如何调用百度地图API实现手机自动定位
- Android百度定位导航之基于百度地图移动获取位置和自动定位
- Android百度地图poi范围搜索
- Android 百度地图POI搜索功能实例代码
- 百度地图API使用方法详解
- javascript实现百度地图鼠标滑动事件显示、隐藏
- 如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)