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

<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. ecshop去头部和掉底部版权

    1.去掉头部版权 打开includes/lib_main.php $page_title = $GLOBALS['_CFG']['shop_title'] . ' - ' . 'Powered by ...

  2. Redis学习——环境搭建以及基础命令使用

    0. 前言: 这篇文章旨在对redis环境的搭建以及对redis有个大概的认识. 一.redis搭建: 环境:ubuntu 14 软件包:redis-3.0.3.tar.gz 安装步骤: 1. 首先解 ...

  3. JAVA JLabel自定义子类无法显示

    import java.awt.*; import java.util.Scanner; import javax.swing.*; public class Test_16_13 extends J ...

  4. XMLBEANS的使用总结

    在本文中,我们将详细了解最好的数据对象XMLBean.从传统角度来说,在Java应用程序中使用XML,就是在从 XML文档向Java导入数据的技术或从数据模型层向XML导出数据技术之间架起了一座桥梁. ...

  5. NSOperation GCD 对比 (附NSOperation演练)

    项目中使用NSOperation的优点是NSOperation是对线程的高度抽象,在项目中使用它,会使项目的程序结构更好子类化NSOperation的设计思路,是具有面向对象的优点(复用.封装),使得 ...

  6. 【转】常用的shell脚本

    from:http://blog.sina.com.cn/s/blog_4152a9f501013r6c.html 常用的shell脚本 (2012-10-10 22:09:07) 转载▼ 标签: 杂 ...

  7. linux下定时执行任务方法【转】

     之前就转过一篇关于定时任务的文章,前俩天用,还的翻出来看!!!再转一次,备用,,需要的时候不用麻烦找! ----------------------------------------------- ...

  8. 软件安装失败，导致ubuntu软件中心软件消失

    感谢百度上各位IT界朋友的帮助,由于某个软件安装失败,导致ubuntu软件中心软件消失的解决办法: 找百度,有人说, 使用命令:sudo apt-get install software-center ...

  9. oracle 中的Ipad()函数

    本文基于转载: lpad函数从左边对字符串使用指定的字符进行填充.lpad意思是从左边填充的意思. 语法格式如下: lpad( string, padded_length, [ pad_string ...

  10. ASP.NET MVC 4 的JS/CSS打包压缩功能-------过滤文件

    今天在使用MVC4打包压缩功能@Scripts.Render("~/bundles/jquery") 的时候产生了一些疑惑,问什么在App_Start文件夹下BundleConfi ...