百度地图多标注显示以及自定义图标

效果图：

HTML部分

<style>*{margin:0px;padding:0px}           html{font-size: 100%;}  body{font-size:1em;} body,html,#container {width: 100%;height: 100%;overflow: hidden;margin: 0;position: absolute;}
</style>
<div id="container"></div>

JS部分

<script type="text/javascript" src="js/jquery-1.10.2.js" ></script>
var markerArr = [{name:"设备1",location:"上海市浦东新区东方路2000号东视大厦",lng: "121.51",lat: "31.24",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{name:"设备2",location:"上海市浦东新区世纪大道1号",lng: "121.4095",lat: "31.24",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{name:"设备3",location:"上海市静安区老沪太路203甲",lng: "121.4095",lat: "31.1796",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{name:"设备4",location:"上海市浦东新区东方路2000号东视大厦",lng: "121.4095",lat: "31.2000",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},];function map_init() {var map = new BMap.Map("container"); // 创建Map实例var point = new BMap.Point(121.4095,31.1796); //地图中心点，广州市map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。map.enableScrollWheelZoom(true); //启用滚轮放大缩小//向地图中添加缩放控件var ctrlNav = new window.BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT,type: BMAP_NAVIGATION_CONTROL_LARGE});map.addControl(ctrlNav);//向地图中添加缩略图控件var ctrlOve = new window.BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT,isOpen: 1});map.addControl(ctrlOve);//向地图中添加比例尺控件var ctrlSca = new window.BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});map.addControl(ctrlSca);var point = new Array(); //存放标注点经纬信息的数组var marker = new Array(); //存放标注点对象的数组var info = new Array(); //存放提示信息窗口对象的数组for (var i = 0; i < markerArr.length; i++) {var p0 = markerArr[i].lng; //var p1 = markerArr[i].lat; //按照原数组的point格式将地图点坐标的经纬度分别提出来var myIcon1 = new BMap.Icon("/intelControlManage/img/CCD.png", new BMap.Size(32,32));point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点marker[i] = new window.BMap.Marker(point[i],{icon:myIcon1}); //按照地图点坐标生成标记map.addOverlay(marker[i]);var label = new window.BMap.Label(markerArr[i].name, { offset: new window.BMap.Size(20, -20) });label.setStyle({color : "#2c2c2c",fontSize : "12px",paddingLeft :'10px',paddingRight :'10px',border: 'none',height : "20px",lineHeight : "20px",fontFamily:"微软雅黑"});marker[i].setLabel(label);info[i] = new window.BMap.InfoWindow("<p style=’font-size:12px;line-height:1.8em;’>" + markerArr[i].name + "</br>地址：" + markerArr[i].location  + "</br></p>"); // 创建信息窗口对象addInfo(info[i].content,marker[i]);}(i);map.setViewport(markerArr) //让所有点在视野范围内//点击标注显示内容function addInfo(txt,marker){let infoWindow = new BMap.InfoWindow(txt); //这里一定要使用let声明，否则显示出来的都是最后一条信息marker.addEventListener("click", function(){this.openInfoWindow(infoWindow);});}}//异地调用百度地图APIfunction map_load() {var load = document.createElement('script');load.src = "http://api.map.baidu.com/api?v=3.0&ak=你的百度API秘钥&callback=map_init";document.body.appendChild(load);}window.onload = map_load;

百度地图多标注显示以及自定义图标相关推荐

python百度地图标注自己的店名_百度地图上怎么显示店名百度地图标注店名方法...
对于很多经营小店的小伙伴来说,能让人一打开百度地图就能看到自己的店名显示在其中便觉得这是一件颇为高兴的事情,但问题是如何在百度地图上怎么显示自己的店名呢?下面小编就为大家带来百度地图标注店名方法,希望 ...
百度地图鼠标经过图层时高亮显示图标及标签内容
百度地图开发常用网站 1.百度地图开放平台 http://lbsyun.baidu.com/ 2.百度地图 Javascript API JavaScript API v3.0 http://lbsy ...
【百度地图API】如何给自定义覆盖物添加事件
原文:[百度地图API]如何给自定义覆盖物添加事件摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应 ...
基于JDBC从数据库中读取数据，在百度地图批量标注地点
基于JDBC从数据库中读取数据,在百度地图批量标注地点一.相关技术 JSP,JDBC,JSON,JS,百度地图API 二.基于JDBC从数据库读取数据见"JSP基于JDBC操作MSSQL ...
百度地图分不同色块显示某个城市的行政区划，并添加城市（区）名
百度地图分不同色块显示某个城市的行政区划,并添加城市(区)名,包括在不同的zoom缩放范围下标签的显示隐藏效果如下: 先拉代码跑一跑 <!DOCTYPE html> <html&g ...
react-native 接百度地图API（显示周边poi）
react-native 接百度地图API (显示周边poi) 目的:显示周边poi及搜索poi功能(给自己的笔记,省去了很多基础步骤,有问题的可以先去了解RN跟android以及Ios原生的通信) ...
百度地图，标注不在中心位置问题
百度地图,标注不在中心位置问题今天用百度地图,做一个效果根据后台传输过来的位置坐标,显示并标注.不知道为什么百度地图老是偏离标注位置一个屏幕. 这是点击查看位置时的效果如图: 这个和我想的跑偏了十 ...
怎样在百度地图上标注上自己公司的名称使别人能在搜索百度地图的同时在地图上能看见本公司地址？
怎样在百度地图上标注上自己公司的名称使别人能在搜索百度地图的同时在地图上能看见本公司地址? 百度地图分享到: 专业回答飞花SEO 团队光娟娟 2015-04-25 13:00 1.注册 ...
AndroidStudio百度地图开发之显示地图
最近打算研究一些百度地图相关的东西,由于官方网站给的都是基于Eclipse开发的例子,所以在研究过程中遇到不少的坑,在这里记录一下,对后来初用AndroidStudio 开发百度地图的兄弟们也算有个 ...

百度地图多标注显示以及自定义图标

百度地图多标注显示以及自定义图标

百度地图多标注显示以及自定义图标相关推荐

最新文章

热门文章