地图例子

最新推荐文章于 2022-05-02 09:50:42 发布

原创最新推荐文章于 2022-05-02 09:50:42 发布 · 95 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #CSS #HTML #ViewUI

应用-地图相关专栏收录该内容

2 篇文章

订阅专栏

<HTML>
<HEAD>
<TITLE>bdk82924</TITLE>
 
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css">
<!--
a:link {
 text-decoration: none;
}
a:visited {
 text-decoration: none;
}
a:hover {
 text-decoration: none;
}
a:active {
 text-decoration: none;
}
-->
</style></HEAD>

<BODY topmargin="0" leftmargin="0">
<div id="maps" style="position:absolute; width:694px; height:530px; border:white solid 1px; left: 2px; top: 74px;">
</div>     
<div id="Layer1" style="position:absolute; left:182px; top:12px; width:62px; height:29px; z-index:1">
  <input type="button" name="Submit" value="按钮" onClick="searchMap()">
</div>
 
<div id="Layer2" style="position:absolute; left:15px; top:13px; width:157px; height:27px; z-index:2">
  <input name="searchName" type="text" id="searchName">
</div>
<script language="javascript" src="http://api.51ditu.com/js/search.js"></script>
<script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>
<script language="javascript">
var map,search;
function showPoint(searchResult)
{
if(searchResult.count>0)//如果存在搜索结果
 {
  map.clearOverLays();
  var poi=searchResult.searchPoints[0];//取出第一个搜索结果点
  var markerPoint=new LTPoint(poi.point[0]+40,poi.point[1]-130);//得到该点的坐标的LTPoint
  var point=new LTPoint(poi.point[0]+50,poi.point[1]-100);//得到该点的坐标的LTPoint
  map.centerAndZoom(point,0);
  var marker=new LTMarker(markerPoint);//向地图上添加一个标记
  map.addOverLay(marker);
  
  
  //var mapText=new LTMapText(marker);
  //mapText.setLabel("☆　　　<a href='http://bdk82924.iteye.com' target='_blank'>"+"露园小区"+"</a>　　　☆");
  
  
  
  var mapText = new LTInfoWindow( point );
        mapText.setLabel( "☆　　　　　<a href='http://bdk82924.iteye.com' target='_blank'>"+"露园小区"+"</a>　　　　　☆" ); 
  
  map.addOverLay(mapText);
  
  map.handleKeyboard(); //键盘操作支持
  map.handleMouseScroll();//鼠标滚轮支持
       
  
  var name=poi.name;//标记点击的时候弹出信息
  
 }

else

 {
  alert('地图暂时无此结果');
 }
}
map=new LTMaps("maps");
map.addControl(new LTSmallMapControl());
search=new LTLocalSearch(showPoint);
search.setCity('南京');
search.search('拓园');
 

function searchMap()
{
var name=searchName.value;
search.search(name);
 
map.removeOverLay(mapText); 
}
</script>
</BODY>
</HTML>