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

<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. openstack虚拟机启动过程

    核心项目3个 1.控制台 服务名:Dashboard 项目名:Horizon 功能:web方式管理云平台,建云主机,分配网络,配安全组,加云盘 2.计算 服务名:计算 项目名:Nova 功能:负责响应 ...

  2. Django笔记-字符编码相关问题整理

    1.添加中文注释后编译出错,提示:Non-ASCII   解决方法: 在Python脚本文件的第一行或第二行添加一句:      #coding:gbk或#coding:utf-8或##-*- cod ...

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

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

  4. ngrok内网穿透利器在windws下的使用

    1.到官网下载windows版本:https://ngrok.com/download 2.解压,双击“ngrok.exe” 3.输入“ngrok http 80”,会随机给你分配域名.见下图. ng ...

  5. jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解

    1.(function($) {…})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){…} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...

  6. 【转】使用Eclipse构建Maven项目 (step-by-step)

    安装eclipse 及配置maven时,参考的资料!!! from:http://blog.csdn.net/qjyong/article/details/9098213 Maven这个个项目管理和构 ...

  7. virtualBox切换到无缝模式后，如何调出菜单

    host+c host就是指右边的那个ctrl键

  8. 源码编译安装 screen

    本文转自:http://blog.163.com/oracle_wwf/blog/static/213030127201211191481101/ [root@web1 soft]# wget ftp ...

  9. Linux服务器管理: 系统的进程管理pstree命令

    pstree命令是查看进程树或者结构的命令 [root@localhost~]#pstree [选项]  需要注意的是不能将 -p和-u同时使用 如果同时使用前者生效后者无效但并不报错 选项: -p: ...

  10. Java字节流：ByteArrayInputStream ByteArrayOutputStream

    ----------------------------------------------------------------------------------- ByteArrayInputSt ...