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

<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. C#中操作XML文件

    1.添加结点:XmlNode xmldoc.Load("..\\..\\App.config"); //根元素 XmlElement root = xmldoc.DocumentE ...

  2. Dynamic Font Programming

    http://www.braynzarsoft.net/Articles/index.php?p=VA&article=Easy-Font-Rendering-in-DirectX-11 ht ...

  3. ecshop Admin后台商品列表处（上架、下架、精品...取消精品）增加操作

    相关文件:goods.php,goods_list.htm 思路: a.增添连接“转移仓库” b.在goods.php,读取仓库列表数据,并且实例化 c. 在goods_list.htm循环数据.点击 ...

  4. ecshop订单-》待付款，待发货，待收货，收货确认

    // 订单 待付款.待发货.待收货.确认收货 public function get_serch_order($type/*,$limit_statrt,$limit_end,$serch*/){ $ ...

  5. ecshop商品-》获取促销商品

    lib_goods.php->function get_promote_goods(){} /** * 获得促销商品 * * @access public * @return array */ ...

  6. Mac下切换bash

    MAC下的终端是神器,安装ZSH后,突然间发现太不好操作了,即使再配上oh-my-zsh也感觉不爽. 然后想删除,自己尝试了下找不到命令删除,于是在网上找找,但是也没找到.最后直接进隐藏文件夹,直接一 ...

  7. Code First 迁移

    https://msdn.microsoft.com/zh-cn/data/jj591621 Data Access and Storage > 学习 > Entity Framework ...

  8. GoLang之协程

    GoLang之协程 目前,WebServer几种主流的并发模型: 多线程,每个线程一次处理一个请求,在当前请求处理完成之前不会接收其它请求:但在高并发环境下,多线程的开销比较大: 基于回调的异步IO, ...

  9. js中自定义事件，使用了jQuery

    $(function(){ $('#btn').bind("myClick", function(){ //自定义myClick事件 $('#test').append(" ...

  10. php.ini中有关安全的设置

    php的默认配置文件在 /usr/local/apache2/conf/php.ini,通过为了使你的web更安全,我们需要对php.ini进行一些设置! (1) 打开php的安全模式 php的安全模 ...