高德地图 API JavaScript API

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<%@ 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>

 

posted @   ®Geovin Du Dream Park™  阅读(2664)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示