<!--添加百度地图-->

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

<script src="../../public/js/GetURLParam.js" type="text/javascript"></script>

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

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

//html代码

<body onload="init()">

<form id="form1" runat="server">

<div style="width:100%" id="container"></div>

</div>

</form>

</body>

//关键代码

<script>

//默认最大

$(document).ready(function(){

var height=GetURLParam("height");

if(height!=null&&height!="undefined"&&height!=""){

$("#container").css("height",height+"px");

}

else{

$("#container").css("height",$(document.body).height());

}

});

var init = function() {

var bumenid =document.getElementById("hiddText").value; //部门id

var typeid =document.getElementById("selType").value; //类型id

if("<%=scvalue %>"==1){ //首次加载

bumenid=-1;

}

var map = new BMap.Map("container", {}); // 创建Map实例

map.centerAndZoom(new BMap.Point(113.376170,22.521573), 5); // 初始化地图,设置中心点坐标和地图级别

map.enableScrollWheelZoom(); //启用滚轮放大缩小

if (document.createElement(‘canvas‘).getContext) { // 判断当前浏览器是否支持绘制海量点

$.ajax({

url:‘/CompanyUser/Action.ashx?Action=OA_Map_InfoHaiXiang&ID=‘+bumenid+"&typeid="+typeid,//带参一般处理程序

type:‘POST‘,

dataType:‘html‘,

contentType:"application/json; charset=utf-8",

error:function(XMLHttpRequest, textStatus, errorThrown){parent.error("系统建议管理(提交单)数据加载错误");},

success:function(result){

if(result!=""){

var data=eval("("+result+")"); //result 类似这种 [[经度,维度,1]] 这个1 我始终不明白是什么

var points = []; // 添加海量点数据

for (var i = 0; i < data.length; i++) {

points.push(new BMap.Point(data[i][0],data[i][1]));

}

var options = {

size: BMAP_POINT_SIZE_SMALL,

shape: BMAP_POINT_SHAPE_STAR,

color: ‘#d340c3‘

}

var pointCollection = new BMap.PointCollection(points, options); // 初始化PointCollection

pointCollection.addEventListener(‘click‘, function (e) {

var Name="";//名称

var ads="";//地址

var tel="";//电话

//关于自定义信息 修改json [[经度,维度,1,名称,地址,电话]]

//循环查出值

for (var i = 0; i < data.length; i++) {

points.push(new BMap.Point(data[i][0],data[i][1]));

if(data[i][0]==e.point.lng&&data[i][1]==e.point.lat){//经度==点击的,维度

Name=data[i][3];

ads=data[i][4];

tel=data[i][5];

break;

}

}

var point = new BMap.Point(e.point.lng, e.point.lat);

var opts = {

width: 250, // 信息窗口宽度

height: 70, // 信息窗口高度

title:"", // 信息窗口标题

enableMessage: false,//设置允许信息窗发送短息

}

var infowindow = new BMap.InfoWindow("名称:"+Name+"<br/>地址:"+ads+"<br/>电话:"+tel, opts);

map.openInfoWindow(infowindow, point);

});

map.addOverlay(pointCollection); // 添加Overlay

}

}

});

} else {

alert(‘请在chrome、safari、IE8+以上浏览器查看本示例‘);

}

}

</script>

百度地图API 海量点 自定义添加信息的更多相关文章

  1. 【百度地图API】如何自定义地图图层？实例：制作麻点图（自定义图层+热区）

    原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...

  2. 百度地图API如何给自定义覆盖物添加事件

    摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应该如何添加呢?我们一起来看一看~ --------- ...

  3. 百度地图API 循环向 marker 添加 click事件

    使用百度地图API,循环向marker添加InfoWindow时,所有的marker点击弹出的inforwindow为最后一个添加的infowindow,百度后,使用js闭包解决此问题,直接贴代码: ...

  4. 百度地图api之如何自定义标注图标

    在百度地图api中,默认的地图图标是一个红色的椭圆形.但是在项目中常常要求我们建立自己的图标,类似于我的这个 操作很简单,分如下几步进行 步骤一:先ps一个图标,大小要合适,如果要背景透明的,记得保存 ...

  5. 百度地图Api进阶教程-弹出信息窗口5.html

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  6. geolocation/ 百度地图api Geolocation 定位当前城市信息

    根据当前所处位置 定位所在城市信息 <html> <head> <meta charset="UTF-8" /> <title>js ...

  7. 百度地图API和高德地图API资料集锦

    [高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行   [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...

  8. 百度地图API 批量添加 带检索功能的信息窗口

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 百度地图api窗口信息自定义

    百度地图加载完后,完全可以用dom方法操作,比较常用的就是点击mark的弹窗,利用jQuery可以很快的创建弹窗,需要注意的就是地图都是异步加载,所以绑定时间要用 jQuery 事件 - delega ...

随机推荐

  1. JavaScript排序算法——插入排序

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 关于Linux发行版的选择

    Linux发行版很多,分为以RedHat为代表的商业发行版和以Debian为代表的免费发行版.前者典型版本有CentOS.Fedora.SUSE等,后者的典型版本有Ubuntu等 CentOS.Ubu ...

  3. C# Bridge Pattern(Handle/Body)

    /* ---------------------------------------------------------------------------- * This file was auto ...

  4. Windows Server 2008修改IE浏览器级别便于使用

    1.降低IE安全级别  Win 2008默认IE的安全级别为“高”,并且不能随意调整,在浏览网页的时候有些会有一些限制,可以打开注册表编辑器进行设置,定位到 [HKEY_LOCAL_MACHINE\S ...

  5. Windwos下常用DOS命令

    1.添加用户命令: net user 用户名 密码 /add 2.将用户加入组的命令: net localgroup administrators 用户名 /add 3.在dos命令行模式下启用用户: ...

  6. ASP.NET MVC 4+ T.JPager使用

    一.同步Link模式 var pagecount = TCalcPager.CalcPageCount(count, pageSize); var page = new TBuilderLinkPag ...

  7. CXF bus interceptor配置

    作用:BUS是cxf的支架,它主要担当扩展及拦截器提供者的角色. 在这里主要讲讲 bus的interceptor的功能 目前配置cxf的interceptor主要有2中方法: 1.通过xml配置文件的 ...

  8. R语言演示功能

    大家熟知的画图ggplot2包 library(ggplot2) #查看系统自带的qplot的函数演示 example(qplot) #R语言的基本对象 向量.矩阵.数组.数据框.列表 R语言的变量都 ...

  9. php怎么获取mac地址？

    如何用php获取mac地址呢?大家知道mac地址是电脑在全球范围的唯一标识,所以这个就非常实用,比如说要做一个投票功能,那mac地址是必不可少 的,如果单纯的靠ip地址来判断这个肯定是不准确的,水分太 ...

  10. Java当中的内存分配以及值传递问题内存解析

    首先必须说明作为Java程序员对于内存只要有大致的了解就可以了,如果你对Java当中的某一个知识点在不需要分析内存分配过程的情况下可以掌握,那就大可不必去研究内存.如果你对知识点已经掌握,那么你应该把 ...