如何使用高德地图
2015-06-04 21:09
260 查看
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="shortcut icon" href="<%=path%>/images/favicon.ico">
<base href="<%=basePath%>">
<title>武大李门大城市病会诊专家团队构建平台</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" href="<%=path%>/style/ui/css/css.css" type="text/css"></link>
<!-- basic scripts -->
<style type="text/css">
.active11 {
width: 88px !important;
height: 32px;
float: left;
cursor: pointer;
background: #fff !important;
border-top: 1px #78AEF9 solid;
margin-bottom: -3px;
}
</style>
<link href="<%=path%>/style/ui/css/bootstrap.min.css" rel="stylesheet">
<link href="<%=path%>/style/ui/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="<%=path%>/style/ui/css/font-awesome.min.css" rel="stylesheet">
<link href="<%=path%>/style/ui/css/prettify.css" rel="stylesheet">
<link href="<%=path%>/style/ui/css/ace.min.css" rel="stylesheet">
<link href="<%=path%>/style/ui/css/ace-responsive.min.css" rel="stylesheet">
<link href="<%=path%>/style/ui/css/ace-skins.min.css" rel="stylesheet">
<script src="<%=path%>/js/header/jquery.min.js"></script>
<script src="<%=path%>/js/header/bootstrap.min.js"></script>
<script src="<%=path%>/js/header/ace-elements.min.js"></script>
<script src="<%=path%>/js/header/ace.min.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=77546e5e10855bf7e1baa5a5b30916e3"></script>
<script type="text/javascript">
var mapObj ;
var marker = new Array();
var keyword;
function eventHandler() {
alert("You clicked me!");
}
function initializemap() {
mapObj = new AMap.Map("container", {
view : new AMap.View2D({//创建地图二维视口
//center:position,//创建中心点坐标
zoom : 10, //设置地图缩放级别
rotation : 0
//设置地图旋转角度
}),
lang : "zh_cn"//设置地图语言类型，默认：中文简体
});//创建地图实例
//mapObj.plugin([ "AMap.MouseTool" ], function() {
// var mousetool = new AMap.MouseTool(mapObj);
// mousetool.marker({
// opt : {
// content : "1"
// }
// }); //使用鼠标工具，在地图上画标记点
//mousetool.rectangle();
//mousetool.close(true);
// });
//<img src="../images/ditumaker.gif"></img>
//var marker = new AMap.Marker({ //创建自定义点标注
// map : mapObj,
// position : new AMap.LngLat(116.406326, 39.903942),
// offset : new AMap.Pixel(-10, -34),
// icon : "<%=path %>/images/ditumaker.gif"
//});
//maker.setMap(mapObj);
AMap.event.addListener(mapObj, "click", xuk);
}
function xuk(e){
var x = e.lnglat.getLng();
var y = e.lnglat.getLat();
var position = new AMap.LngLat(x, y);
var marker = new AMap.Marker({ //创建自定义点标注
map : mapObj,
position : position,
offset : new AMap.Pixel(-10, -34),
icon : "<%=path %>/images/ditumaker.gif"
});
maker.setMap(mapObj);
}
function ss(){
var keyword1=$("input#ss").val();
if(keyword1==""){
//alert(1);
alert("输入框为空");
}else{
keyword=keyword1;
placeSearch();
}
//alert();
}
function placeSearch() {
var MSearch;
mapObj.plugin(["AMap.PlaceSearch"], function() {
MSearch = new AMap.PlaceSearch({ //构造地点查询类
//city:"太原" //城市
});
AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//返回地点查询结果
MSearch.search(keyword); //关键字查询
});
}
//回调函数
function keywordSearch_CallBack(data) {
var resultStr = "";
var poiArr = data.poiList.pois;
var resultCount = poiArr.length;
for (var i = 0; i < resultCount; i++) {
resultStr += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\"><table><tr><td><img src=\"http://api.amap.com/webapi/static/Images/" + (i + 1) + ".png\"></td>" + "<td><h3><font color=\"#00a6ac\">名称: " + poiArr[i].name + "</font></h3>";
resultStr += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel,poiArr[i].location) + "</td></tr></table></div>";
addmarker(i, poiArr[i]);
}
mapObj.setFitView();
//document.getElementById("result").innerHTML = resultStr;
}
function TipContents(type, address, tel,location) { //窗体内容
if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") {
type = "暂无";
}
if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {
address = "暂无";
}
if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof tel == "undefined") {
tel = "暂无";
}
if (location == "" || location == "undefined" || location == null || location == " undefined" || typeof location == "undefined") {
location = "暂无";
}
var str = " 地址：" + address + "<br /> 电话：" + tel + " <br /> 类型：" + type+"<br /> 经纬度："+location;
return str;
}
function addmarker(i, d) {
var lngX = d.location.getLng();
var latY = d.location.getLat();
var markerOption = {
map:mapObj,
icon : "<%=path %>/images/ditumaker.gif",
position:new AMap.LngLat(lngX, latY)
};
var mar = new AMap.Marker(markerOption);
marker.push(new AMap.LngLat(lngX, latY));
var infoWindow = new AMap.InfoWindow({
content:"<h3><font color=\"#00a6ac\"> " + (i + 1) + ". " + d.name + "</font></h3>" + TipContents(d.type, d.address, d.tel,d.location),
size:new AMap.Size(300, 0),
autoMove:true,
offset:new AMap.Pixel(0,-30)
});
windowsArr.push(infoWindow);
var aa = function (e) {infoWindow.open(mapObj, mar.getPosition());};
AMap.event.addListener(mar, "click", aa);
}
</script>
</head>
<body onload="javascript:initializemap();">
<jsp:include page="/hzpt_header.jsp"></jsp:include>
<jsp:include page="/hzpt_left.jsp"></jsp:include>
<link rel="stylesheet" href="<%=path%>/treeview/jquery.treeview.css" type="text/css"></link>
<link rel="stylesheet" href="<%=path%>/treeview/demo/screen.css" type="text/css"></link>
<script type="text/javascript" src="<%=path%>/treeview/lib/jquery.cookie.js"></script>
<script type="text/javascript" src="<%=path%>/treeview/jquery.treeview.js"></script>
<script type="text/javascript">
$(function() {
$("#browser").treeview();
})
</script>
<div id="main" style="width: 80%;">
<article class="module width_3_quarter" style="width:100%">
<div id="font">
<font class="tabs_involved">召集人针对突发事件情景描述</font>
</div>
<header></header></article>
<hr>
<h4 style="position: relative;left:50px;">1. 请选择突发事件类型</h4>
<div style="position: relative;left:50px;height:400px;width:300px;overflow:auto;float:left;margin-bottom: 30px;border:1px solid #f3f3f3;">
<h5>选择突发事件类型</h5>
<style type="text/css">
ul#browser ul li {
cursor: pointer;
}
</style>
<div id="sjlx" style="position: relative;left:10px;top:5px;">
<ul id="browser" class="filetree">
<li class="expandable"><span class="folder">自然灾害</span>
<ul style="display:none">
<li><span class="file">水旱灾害</span>
</li>
<li><span class="file">气象灾害</span>
</li>
<li><span class="file">地震灾害</span>
</li>
<li><span class="file">地质灾害</span>
</li>
<li><span class="file">海洋灾害</span>
</li>
<li><span class="file">生物灾害</span>
</li>
<li><span class="file">森林草原火灾</span>
</li>
</ul></li>
<li class="expandable"><span class="folder">安全事故</span>
<ul style="display:none">
<li><span class="file">安全事故</span>
</li>
<li><span class="file">交通运输事故</span>
</li>
<li><span class="file">公共设施和设备事故</span>
</li>
<li><span class="file">环境污染</span>
</li>
<li><span class="file">生态破坏事件</span>
</li>
</ul></li>
<li class="expandable"><span class="folder">公共卫生安全事件</span>
<ul style="display:none">
<li><span class="file">传染病疫情</span>
</li>
<li><span class="file">群体性不明原因疾病</span>
</li>
<li><span class="file">食品安全和职业危害</span>
</li>
<li><span class="file">动物疫情</span>
</li>
</ul></li>
<li class="expandable"><span class="folder">社会安全事件</span>
<ul style="display:none">
<li><span class="file">经济安全事件</span>
</li>
<li><span class="file">恐怖袭击事件</span>
</li>
<li><span class="file">涉外突发事件</span>
</li>
</ul></li>
</ul>
</div>
</div>
<div style="width:500px;border:1px #f4f4f4 solid;height:400px;float:left;position: relative;left:100px;">
<h5>该类型城市突发事件推荐的关键词主要有：</h5>
<div id="tjkeyword" style="display:none;position: relative;left:12px;top:15px;">抢险、救援、打捞、灾后重建、援助、医院、灭火</div>
<script type="text/javascript">
$(function() {
$("ul#browser ul li").click(function() {
$("div#tjkeyword").css("display", "block");
})
})
</script>
</div>
<h4 style="position: relative;left:50px;clear:both;">2. 突发事件表达</h4>
<div style="position: relative;left:65px;top:10px;clear:both;">
<table>
<tr>
<td style="vertical-align:top;padding:5px 0px 2px 10px;">1) 请选择事发地点</td>
</tr>
<tr>
<td>
<div><input type="text" id="ss" value=""></input> <button onclick="javascript:ss()">搜索</button> </div>
<div style="border:1px solid #666;padding:10px;position: relative;top:10px;left:20px;">
<div id="container" style="height:500px;width:800px;"></div>
</div>
</td>
</tr>
<tr>
<td style="height:42px;padding-top:10px !important;">2) 选择时间维度的状态</td>
</tr>
<tr>
<td><select style="height:42px;margin-bottom: 0!important;margin: 0 0px; width: 118px;height: 25px;padding: 2px 3px;border-radius: 0;border: 1px black solid;position: relative;left:20px;top:5px;">
<option>萌芽阶段</option>
<option>事发阶段</option>
<option>救援阶段</option>
<option>事后处理阶段</option>
</select></td>
</tr>
<tr>
<td style="vertical-align:center;height:45px;">3) 总体描述</td>
</tr>
<tr>
<td><textarea style="width:850px;height:250px;position: relative;left:20px;top:10px;"></textarea>
</td>
</tr>
</table>
</div>
</div>
<!--/main-->
<div style="clear: both;"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ACM 图像有用区域
- 【每日scrum】NO.5
- HttpClient4.4.1 关于文件上传 中文文件名编码问题
- 实现signal和slot机制(2)-跨线程投递
- Unable to create unsliced image from csi bitmap data
- cf-289B
- MAC 下编写opengl3+程序
- P123.36
- 白话经典算法系列之中的一个 冒泡排序的三种实现
- 课程评价
- 【每日scrum】NO.4
- Javah 使用时报错：找不到类
- JavaScript存在多线程吗
- 实现医生工作站的疾病档案功能的代码（十五）
- IOS 运行时（runtime）机制
- 图书管理系统------软件设计图纸
- Spring mvc 过滤器
- 用VS2012或VS2013在win7下编写的程序在XP下运行就出现“不是有效的win32应用程序
- iOS Plist文件的创建
- [总结] 网络流学习笔记