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

<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. JQuery中serialize()、serializeArray()和param()方法示例介绍

    在项目中做form表单提交的时候,如果参数比较少,可以通过jquery一个个取得,但是当 form表参数很多的情况下,还是一一取得的话无疑是加大了工作量,那我们需要咱们获取到表单的所有参数呢,幸好,j ...

  2. System.Diagnostics.Trace.Listeners

    System.Diagnostics.Trace.Listeners.Clear(); System.Diagnostics.Trace.AutoFlush = true; System.Diagno ...

  3. Python之路【第七篇续】：I/O多路复用

    回顾原生Socket 一.Socket起源: socket起源于Unix,而Unix/Linux基本哲学之一就是“一切皆文件”,对于文件用[打开][读写][关闭]模式来操作. socket就是该模式的 ...

  4. 二叉排序树（Binary Sort Tree）

    参考文章:http://blog.csdn.net/ns_code/article/details/19823463 不过博主的使用第一种方法操作后的树已经不是二叉排序树了,值得深思!! #inclu ...

  5. Orchard源码分析（7.2）：Controller相关

    概述 默认情况下,ASP.NET MVC内置的DefaultControllerFactory负责Controller实例的创建.Orchard定义了一个继承自DefaultControllerFac ...

  6. firefox 提示 setTimeout():useless setTimeout call (missing quotes around argument?) 错误

    原来代码: setTimeout(window.parent.refreshNode(id),500);// 500毫秒后,调用父窗口的refreshNode()方法 refreshNode()方法总 ...

  7. Android Studio-开启Preview视图

    Preview视图会在切换"Design"和"Text"视图的时候自动显示,可在右侧工具栏开启: 今天无意中关闭了,找了半天,原来可以在这个地方再次开启:

  8. [C#]集合已修改；可能无法执行枚举操作

    摘要 我相信很多人对这个再熟悉不过了.对已经修改的集合进行操作就会出现这个错. 解决办法 比如有下面的一段代码,我们创建一个集合,并向集合中添加10个数,然后,我们循环再将这些数移除了. static ...

  9. Object&&String学习

    Object类 列表项 String类 常用方法 构造方法 public String() public String(byte[] bytes) public String(byte[]bytes, ...

  10. Memcached原理分析

    Memcached的内存管理方式 Memcached采用了名为Slab Allocation的机制分配,管理内存. Slab Allocation的原理相当简单.将分配的内存分割成各种尺寸的块(chu ...