<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm12.aspx.cs" Inherits="JSONFromCS.WebForm12" %>
<!DOCTYPE>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>高德地图 API JavaScript API</title>
<link rel="stylesheet" type="text/css" href="http://developer.amap.com/Public/css/demo.Default.css" />
<script language="javascript" type="text/javascript" src="http://webapi.amap.com/maps?v=1.2&key=7aeb3377f9e53d9bf0c558bf8e821f76"></script>
<script language="javascript" type="text/javascript">
//http://developer.amap.com/javascript/example/num/1103
var mapObj;
var marker = new Array();
var windowsArr = new Array();
//基本地图加载
function mapInit(){
mapObj = new AMap.Map("iCenter");
}
//地点查询函数
function placeSearch(){
mapObj.clearMap();
var arr = new Array();
var MSearch;
//绘制矩形边框
arr.push(new AMap.LngLat("116.423321","39.884055"));
arr.push(new AMap.LngLat("116.473103","39.884055"));
arr.push(new AMap.LngLat("116.473103","39.919348"));
arr.push(new AMap.LngLat("116.423321","39.919348"));
var polygon = new AMap.Polygon({
map:mapObj,
path:arr,
strokeColor:"#0000ff",
strokeOpacity:0.2,
strokeWeight:3,
fillColor: "#f5deb3",
fillOpacity: 0.8
});
mapObj.plugin(["AMap.PlaceSearch"], function() { //加载PlaceSearch服务插件
MSearch = new AMap.PlaceSearch({
pageSize: 8
}); //构造地点查询类
AMap.event.addListener(MSearch, "complete", placeSearch_CallBack); //查询成功时的回调函数
MSearch.searchInBounds("酒店", new AMap.Bounds(arr[0], arr[2])); //范围查询
});
}
//添加marker和infowindow
function addmarker(i, d){
var lngX = d.location.getLng();
var latY = d.location.getLat();
var markerOption = {
map:mapObj,
icon:"http://webapi.amap.com/images/"+(i+1)+".png",
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 +"</h3></font>"+TipContents(d.type, d.address, d.tel),
size:new AMap.Size(300, 0),
autoMove:true,
offset:new AMap.Pixel(0,-30)
});
windowsArr.push(infoWindow);
var aa = function(){infoWindow.open(mapObj, mar.getPosition());};
AMap.event.addListener(mar, "click", aa);
}
//地点查询回调函数
function placeSearch_CallBack(data){
var resultStr="";
var resultArr = data.poiList.pois;
var resultNum = resultArr.length;
for (var i = 0; i < resultNum; i++) {
resultStr += "<div id='divid"+(i+1)+"' onmouseover='openMarkerTipById1("+i+",this)' onmouseout='onmouseout_MarkerStyle("+(i+1)+",this)' style="font-size: 12px;cursor:pointer;padding:2px 0 4px 2px; border-bottom:1px solid #C1FFC1;"><table><tr><td><img src="http://webapi.amap.com/images/"+(i+1)+".png"></td>"+"<td><h3><font color="#00a6ac">名称: "+resultArr[i].name+"</font></h3>";
resultStr += TipContents(resultArr[i].type, resultArr[i].address, resultArr[i].tel)+"</td></tr></table></div>";
addmarker(i, resultArr[i]);
}
mapObj.setFitView();
document.getElementById("result").innerHTML = resultStr;
}
function TipContents(type,address,tel){ //窗体内容
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 address == "tel") {
tel = "暂无";
}
var str =" 地址：" + address + "<br /> 电话：" + tel + " <br /> 类型："+type;
return str;
}
function openMarkerTipById1(pointid,thiss){ //根据id打开搜索结果点tip
thiss.style.background='#CAE1FF';
windowsArr[pointid].open(mapObj, marker[pointid]);
}
function onmouseout_MarkerStyle(pointid,thiss) { //鼠标移开后点样式恢复
thiss.style.background="";
}
</script>
</head>
<body onload="mapInit();">
<div id="iCenter"></div>
<div class="demo_box">
<p><input type="button" value="查询" onclick="placeSearch()"/><br />
</p>
<div id="r_title"><b>范围内查询结果:</b></div>
<div id="result"> </div>
</div>
<form id="form1" runat="server">
<div>
</div>
</form>
<!-- JiaThis Button BEGIN -->
<script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?uid=1363823158283538&type=left&move=0&btn=l5.gif" charset="utf-8"></script>
<!-- JiaThis Button END -->
</body>
</html>