【笔记】天地图Demo

最近在做一个xxx机井xx项目，项目经理让做的天地图Demo。逆地理编码，这里不再贴码，请看API http://lbs.tianditu.com/api/js4.0/guide.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script type="text/javascript" src="http://api.tianditu.com/api?v=4.0"></script><script>var map,control;function onLoad() {// 初始化地图对象map = new T.Map('mapDiv');// 设置显示地图的中心点和级别map.centerAndZoom(new T.LngLat(117.20, 39.13), 8);// 允许鼠标滚轮缩放地图map.enableScrollWheelZoom();//添加鹰眼控件var miniMap = new T.Control.OverviewMap({isOpen: true,size: new T.Point(150, 150)});map.addControl(miniMap);// 创建比例尺控件对象var scale = new T.Control.Scale();// 添加比例尺控件map.addControl(scale);// 创建缩放平移控件对象control = new T.Control.Zoom();// 添加缩放平移控件map.addControl(control);control.setPosition(T_ANCHOR_TOP_RIGHT);// 创建标记图片对象（支持更换图标）var icon = new T.Icon({iconUrl: "http://api.tianditu.com/img/map/markerA.png",iconSize: new T.Point(19, 27),iconAnchor: new T.Point(10, 25)});// 后台要传来的json数据（测试数据）var jsonStr = "[{'longitude':'117.343706','latitude':'39.025403','address':'天津市津南区辛庄镇','code':'XZZ001','waterRight':'1300','waterConsumption':'620','state':'0'},{'longitude':'117.040829','latitude':'39.197267','address':'天津市北辰区青光镇','code':'QGZ001','waterRight':'900','waterConsumption':'520','state':'0'},{'longitude':'117.233717','latitude':'39.018587','address':'天津市西青区大寺镇大寺村','code':'DSC001','waterRight':'650','waterConsumption':'326','state':'0'}]";// json串转json对象var json = eval('(' + jsonStr + ')');var marker,content;// 循环获取json数据for (var i = 0; i < json.length; i++) {// 创建标注marker = new T.Marker(new T.LngLat(json[i].longitude,json[i].latitude),{icon: icon}); // 准备标注信息content = "<table cellpadding='0' cellspacing='0' style='width: 260px;'>" +"<tr>" +"<td style='width: 50px;'>机井编号：</td>" +"<td style='width: 70px;'>"+json[i].code+"</td>" +"<td style='width: 40px;'>状&nbsp;&nbsp;&nbsp;&nbsp;态：</td>" +"<td style='width: 40px;'>正常</td>" +"</tr>" +"<tr>" +"<td>分配水权：</td>" +"<td>"+json[i].waterRight+"m³</td>" +"<td>用水量：</td>" +"<td>"+json[i].waterConsumption+"m³</td>" +"</tr>" +"<tr>" +"<td>归&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;属：</td>" +"<td colspan='3'>"+json[i].address+"</td>" +"</tr>" +"</table>";// 将标注添加到地图中map.addOverLay(marker);// 为标注添加点击事件addClickHandler(content,marker);}function addClickHandler(content,marker){// 为标注添加点击事件marker.addEventListener("click",function(e){openInfo(content,e);});}function openInfo(content,e){// 获取标注的经纬坐标var point = e.lnglat;// 创建标注marker = new T.Marker(point);// 创建信息窗口对象var markerInfoWin = new T.InfoWindow(content,{offset:new T.Point(0,-20)}); // 开启信息窗口  map.openInfoWindow(markerInfoWin,point); }         }</script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv" style="position:absolute;width:600px; height:500px"></div>
</body>
</html>

【笔记】天地图Demo相关推荐

java message bus_【Microsoft Azure学习之旅】消息服务Service Bus的学习笔记及Demo示例...
今年项目组做的是Cloud产品,有幸接触到了云计算的知识,也了解并使用了当今流行的云计算平台Amazon AWS与Microsoft Azure.我们的产品最初只部署在AWS平台上,现在产品决定同时支 ...
JavaMail发送邮件的笔记及Demo
最近碰到一个需求,就是注册用户时候需要向用户发送激活邮箱,于是照着网上搜来的demo自己试着运行了一下,发件时我用的是网易163邮箱,收件时用QQ邮箱,运行后报了一个错误: 网络上搜索解决方式,多次尝 ...
【unity 保卫星城】--- 开发笔记（Demo演示篇）
[unity 保卫星城]- 开发笔记保卫星城一.游戏介绍 <保卫星城>是一款移动端2D横板射击类游戏,使用Unity3D引擎开,与一般的打飞机需要躲避子弹不同,本游戏需要玩家控制小飞机 ...
Android笔记 SharedPreferences demo
1布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools ...
Android笔记 simpleAdapter demo
1取任意五张图片(不要太大)放到drawable-hdpi文件夹下,我取的系统自带图标 sym_action_add.png sym_action_call.png sym_action_chat.p ...
Android笔记简单demo Spinner AutoCompleteTextView Menu
demo1 spinner 1布局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android& ...
Android笔记对话框demo大全
1布局文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:too ...
go-pitaya学习笔记(6)-cluster-protobuf demo分析
学习笔记: 我家别墅靠大海/pitaya-learn 尝试集成功能:我家别墅靠大海/pitaya-game 如果你正在看此笔记,请你左边放笔记,右边放chatdemo的代码!! 我是按代码的顺序记的笔 ...
go-pitaya学习笔记(10)-worker demo分析
学习笔记: 我家别墅靠大海/pitaya-learn 尝试集成功能:我家别墅靠大海/pitaya-game 如果你正在看此笔记,请你左边放笔记,右边放chatdemo的代码!! 我是按代码的顺序记的笔 ...

【笔记】天地图Demo

【笔记】天地图Demo相关推荐

最新文章

热门文章