高德地图 API JavaScript API

最新推荐文章于 2020-06-09 10:39:25 发布

weixin_34341229

最新推荐文章于 2020-06-09 10:39:25 发布

阅读量155

点赞数

文章标签： javascript c# ViewUI

<%@ 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)+"' οnmοuseοver='openMarkerTipById1("+i+",this)' οnmοuseοut='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 οnlοad="mapInit();">
<div id="iCenter"></div>  
    <div class="demo_box">  
        <p><input type="button" value="查询" οnclick="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>

weixin_34341229

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
高德地图 API JavaScript API

&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm12.aspx.cs" Inherits="JSONFromCS.WebForm12" %&gt;&lt;!DOCTYPE&gt;&lt;html&gt;&lt;head runat="server&quo
复制链接

扫一扫