<!--添加百度地图-->
<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 海量点 自定义添加信息的更多相关文章
-
【百度地图API】如何自定义地图图层?实例:制作麻点图(自定义图层+热区)
原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...
-
百度地图API如何给自定义覆盖物添加事件
摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应该如何添加呢?我们一起来看一看~ --------- ...
-
百度地图API 循环向 marker 添加 click事件
使用百度地图API,循环向marker添加InfoWindow时,所有的marker点击弹出的inforwindow为最后一个添加的infowindow,百度后,使用js闭包解决此问题,直接贴代码: ...
-
百度地图api之如何自定义标注图标
在百度地图api中,默认的地图图标是一个红色的椭圆形.但是在项目中常常要求我们建立自己的图标,类似于我的这个 操作很简单,分如下几步进行 步骤一:先ps一个图标,大小要合适,如果要背景透明的,记得保存 ...
-
百度地图Api进阶教程-弹出信息窗口5.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...
-
geolocation/ 百度地图api Geolocation 定位当前城市信息
根据当前所处位置 定位所在城市信息 <html> <head> <meta charset="UTF-8" /> <title>js ...
-
百度地图API和高德地图API资料集锦
[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...
-
百度地图API 批量添加 带检索功能的信息窗口
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
-
百度地图api窗口信息自定义
百度地图加载完后,完全可以用dom方法操作,比较常用的就是点击mark的弹窗,利用jQuery可以很快的创建弹窗,需要注意的就是地图都是异步加载,所以绑定时间要用 jQuery 事件 - delega ...
随机推荐
-
启动Maven项目启动报错:java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener
tomcat在发布项目的时候没有同时发布maven依赖所添加的jar包,你需要设置一下eclipse:项目 -> 属性 -> Deployment Assembly -> Add - ...
-
ZOJ 1107FatMouse and Cheese(BFS)
题目链接 分析: 一个n * n的图,每个点是一个奶酪的体积,从0,0开始每次最多可以走k步,下一步体积必须大于上一步,求最大体积和 #include <iostream> #includ ...
-
dojo 二 AMD模块
可参考官方教程:http://dojotoolkit.org/documentation/tutorials/1.7/hello_dojo/教程里主要定义了两个方法,setText设置文本内容和res ...
-
数据库中使用 Synonym和openquery
如果,你想在一台数据库服务器上,查询另一个台数据服务器的数据该如何做呢?如果,你想在同一台数据服务器上,在不同的数据库之间查询数据,又该怎么办呢?那就让我为你介绍Synonym和openquery吧. ...
-
【转】ASP.NET MVC框架下使用MVVM模式-KnockOutJS+JQ模板例子
KnockOutJS学习系列----(一) 好几个月没去写博客了,最近也是因为项目紧张,不过这个不是借口,J. 很多时候可能是因为事情一多,然后没法静下来心来去写点东西,学点东西. 也很抱歉,突然看到 ...
-
cs代码实现控件移动TranslateTransform
xaml: <Rectangle> <Rectangle.RenderTransform> <TranslateTransform x:Name="myTran ...
-
学习Sass(二)
前面简单介绍了sass的安装,特点和使用方法等,这里记录下sass的基本语法. 1.变量 2.运算 3.嵌套 4.代码复用 5.高级语法 6.自定义函数 一.变量 变量以$开始,像css属性那样赋值, ...
-
Hibernate框架笔记03表操作多对多配置
目录 1. 数据库表与表之间的关系 1.1 一对多关系 1.2 多对多关系 1.3 一对一关系[了解] 2. Hibernate的一对多关联映射 2.1 创建一个项目,引入相关jar包 2.2. 创建 ...
-
Oracle高级查询之over(partition by...)
现有表,数据如下: eg1:查询年龄第二的队员 通常写法: select * from (select a.*, rownum r from (select t.* from l_student_in ...
-
Go Slice 使用中的小陷阱
go中的切片有两个特性: 底层的数据结构是数组 type slice struct { array unsafe.Pointer len int cap int } 包括从切片和数组派生出来的切片都是 ...