百度map
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我爱你</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.2&services=true"></script>
<style type="text/css">
.div-relative {
position: relative;
color: #000;
border: 1px solid #000;
width: 99%;
height: 800px;
}
/* 背景为黄色 */
.div-a {
position: absolute;
left: 80px;
top: 80px;
background: #00F;
width: 300px;
height: 300px;
}
/* DIV背景颜色为蓝色*/
</style>
</head>
<body>
<div class="div-relative" id="dituContent" >
</div>
</body>
</html>
<script> function initMap() {
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
//addMarker(markerArr); //向地图中添加marker
//Load_Point(content);
}
//创建地图函数：
var local;
function createMap() {
var map = new BMap.Map("dituContent", { minZoom: 13, maxZoom: 18 }); //在百度地图容器中创建一个地图
var point = new BMap.Point(111.292827, 30.697726); //定义一个中心点坐标
map.centerAndZoom(point, 13); //设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map; //将map变量存储在全局
local = new BMap.LocalSearch(map, {
renderOptions: {
map: map,
selectFirstResult: false
}
}); } //地图事件设置函数：
function setMapEvent() {
map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard(); //启用键盘上下左右键移动地图
}
//地图控件添加函数：
function addMapControl() {
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
isOpen: 1
}); map.addControl(ctrl_ove); //向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({
anchor: BMAP_ANCHOR_BOTTOM_LEFT
});
map.addControl(ctrl_sca);
map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP] }));
}
//创建marker
function addMarker(markerArr1) {
for (var i = 0; i < markerArr1.length; i++) {
var json = markerArr1[i];
var p0 = json.monitoring_point_longitude;
var p1 = json.monitoring_point_latitude;
var point = new BMap.Point(p0, p1);
var icon = { h: 60, l: 0, lb: 9, t: 1, w: 60, x: 6 };
var iconImg = createIcon(icon, 1, markerArr1[i]);
var marker = new BMap.Marker(point, { icon: iconImg });; var iw = createInfoWindow(markerArr1, i);
var label = new BMap.Label(json.monitoring_point_name, { "offset": new BMap.Size(icon.lb - icon.x + 15, -2) });
marker.setLabel(label);
map.addOverlay(marker);
label.setStyle({ borderColor: "#808080", color: "#333", cursor: "pointer" });
(function () {
var index = i;
var _iw = iw;
var _marker = marker;
_marker.addEventListener("click", function () {
this.openInfoWindow(_iw);
});
_iw.addEventListener("open", function () { _marker.getLabel().hide(); });
_iw.addEventListener("close", function () { _marker.getLabel().show(); });
label.addEventListener("click", function () { _marker.openInfoWindow(_iw); });
if (!!json.isOpen) {
label.hide(); _marker.openInfoWindow(_iw);
}
})()
}
}
//<option value="0">水文气象综合站</option>
// <option value="1">河道水文站</option>
// <option value="2">道路水位站</option>
var mnType = {
"0": "水文气象综合站",
"1": "河道水文站",
"2": "道路水位站"
};
//创建InfoWindow
function createInfoWindow(markerArr1, i) {
var json = markerArr1[i];
var data = loademstimedata(json.monitoring_point_mn);
var tr = "";
$(data).each(function (index, row) {
tr += "<tr><td>" + row.factor_name + "</td><td>" + row.datatime + "</td><td>" + row.avgvalue + "</td></tr>";
});
var opts = {
width: 700, // 信息窗口宽度
height: 400, // 信息窗口高度
title: "", // 信息窗口标题
enableMessage: true,//设置允许信息窗发送短息
message: ''
}
var detail = "站点名称：" + json.monitoring_point_name +
"<br>站点类型：" + mnType[json.monitoring_point_type] +
"<br/>站点的地址：" + json.monitoring_point_address;
if (!json.monitoring_point_pic) {
json.monitoring_point_pic = "../Images/img/none.jpg";
}
var imgDom = "<img style='float:left;margin-left: 27px;width:156px;height:165px;' src='" + json.monitoring_point_pic + "' /><div style='float:left;font-size: 17px;margin-left: 20px;width:370px;overflow-x: auto;'>" + detail + "</div>";
var htmldom = imgDom + "<table class='table'>" +
"<thead><tr>" +
"<th >名称</th>" +
"<th >时间</th>" +
"<th >监测值</th>" +
"<tr/></thead>" +
"<tbody>" + tr + "</tbody>"
"</table>";
var iw = new BMap.InfoWindow(htmldom, opts);
return iw;
}
//创建一个Icon
function createIcon(json, t, obj) {
var icon;
if (obj.monitoring_point_pic) {
if (t == 1) {
icon = new BMap.Icon(obj.monitoring_point_pic, new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 20), offset: new BMap.Size(json.x, json.h) });
}
} else {
if (t == 1) {
icon = new BMap.Icon("../Scripts/easyui/themes/ext/arrow_down.png", new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 20), offset: new BMap.Size(json.x, json.h) });
}
}
return icon;
}
var points = null;
initMap();
</script>
参考 http://developer.baidu.com/map/jsdemo.htm#a1_2
百度map的更多相关文章
- 百度地图瓦片原理 | 百度map使用教程
百度地图瓦片原理: http://blog.csdn.net/mygisforum/article/details/22997879 百度map使用教程: http://www.myexception ...
- H5结合百度map实现GPS定位
前言 目前我们做m端时都会用到定位,当用户第一次打开h5页面时会启动gps定位,并结合百度map来查找城市.按照我们的逻辑思路就是gps定位获取经纬度,传到后台调用百度的一个接口查找城市名称. 1.查 ...
- 一个百度MAP导航的基础封装
项目中需要根据点击时候点击的内容,输入百度地图查找并展示规划等相关功能 于是封装了一个单独的百度map的html页面以供调用 功能包括了 ①展示底图 ②切换卫星图,切换卫星路线图,切换普通地图 ③通过 ...
- 手机版的百度map封装,使用gps定位
代码如下,包自己引 包参考 一个百度MAP导航的基础封装 使用的是浏览器调用gps定位 修改了标注的大小 效果如图: 代码...... <!DOCTYPE html> <html&g ...
- 百度Map与HT for Web结合的GIS网络拓扑应用
在<HT for Web整合OpenLayers实现GIS地图应用>篇中介绍了HT for Web与OpenLayers的整合,不少朋友反应国内用得比较多的还是百度地图,虽然HT整合百度地 ...
- （转）百度Map API
转自 http://blog.sina.com.cn/s/blog_6079f38301013sb3.html 一.与地图操作相关的接口哦! (这些接口的开启都是写在执行成功的回调函数那里) map ...
- 【iOS】苹果，百度Map定位使用与总结
iOS中使用较多的3款地图,google地图.百度地图.苹果自带地图(高德).当中苹果自带地图在中国使用的是高德的数据.苹果在iOS 6之后放弃了使用谷歌地图,而改用自家的地图.在国内使用的较多的就是 ...
- mono for android 百度map binding项目(转)
好丫小子之前发布过百度地图android SDK的mono for android绑定dll,许多朋友看过之后说想理解是怎么绑定的,现我把绑定的代码发出来. 针对2.1.2版本百度地图android ...
- wechat JS-SKD (getLoaction) 定位显示百度map
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
随机推荐
- 11、Pickle序列化
概念: 常用语法:DUMP:把现在内存中的对象状态装到硬盘文件上 常用语法:LOAD:把磁盘文件中的对象导入到内存中 小练习: 字典中存账号信息,用pickle dump到文件中,并load进行修 ...
- GSM模块_GPRS数据传输机制和原理
通信专业术语 BSS--基站子系统,通过无线接口与移动台直接联系,负责在一定区域内和移动台通信.(GSM) BTS--基站收发台,可以看作一复杂的无线调制器,BSS的主要部分,每个分配有若干信道.(G ...
- Laravel系列教程一：安装及环境配置
免费视频教程地址https://laravist.com/series/laravel-5-basic 最近在SF上面看到越来越多的Laravel相关的问题,而作为一个Laravel的脑残粉,本来打算 ...
- N的阶层（王道）
题目描述: 输入一个正整数N,输出N的阶乘. 输入: 正整数N(0<=N<=1000) 输出: 输入可能包括多组数据,对于每一组输入数据,输出N的阶乘 样例输入: 4 5 15 样例输出: ...
- JavaScript--百度百科
JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标 ...
- Python基础--人们一些最爱的标准库(random time)
Python继续! random 包括返回随机数的函数. 这里跟C++一样,产生的是伪随机数,并非全然随机数. random中一些重要的函数: random() 返回0<n<=1的随机数n ...
- rabbitMq视频教程
http://edu.51cto.com/index.php?do=lesson&id=83136
- blog url.txt
java 回收机制与虚拟机http://www.cnblogs.com/zhanglei93/p/6636831.html Java 编程经验(牛人写的) 上/下http://www.thinksa ...
- Linux下使用Fastboot给手机刷ROM
前言 一直在刷机.失败.刷机.失败中,还好今天有个任务能够使用fastboot刷机.好开心,最终不用切换系统了.(话说好久没有写代码了,身为一个互联网程序猿,不写代码我easy紧张). 开发环境 Ub ...
- 改变Fragment的默认动画
FragmentTransaction ft = getFragmentManager().beginTransaction(); //设置进入退出动画 ft.setCustomAnimations( ...