首页 > 代码库 > jsp页面集成 高德地图

jsp页面集成 高德地图

2024-09-13 13:44:10   217人阅读

高德地图页面HTML代码
技术分享 
 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
 7     <title>收货地址</title>
 8     <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=979f31cdf206441c162f2cb76ada4f30&plugin=AMap.Geocoder"></script>
 9     <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
10     <style>
11         #addressBox{height:20px;width:600px;}
12         #mapBox{height:400px;width:600px}
13         #pointBox{height:20px;width:600px;}
14     </style>
15 <body>
16 <div id="searchDiv">
17     <input id="addressBox" type="hidden" value="乌鲁木齐站" />
18     <input id="searchBtn" type="hidden" onclick="geocoder();"/>
19 </div>
20 <!-- 隐藏经纬度信息 -->
21 <!-- <div id=‘pointBox‘>&nbsp;</div> -->
22 <div id=‘mapBox‘></div>
23 <script type="text/javascript">
24 var $addressBox = document.getElementById(‘addressBox‘);
25 /* var $pointBox = document.getElementById("pointBox"); */
26 
27 //创建地图
28 var map = new AMap.Map("mapBox", {
29     resizeEnable: true,
30     center: [116.366444,40.102251],
31     zoom:14
32 });
33 
34 //添加标注
35 function addMarker(point) {
36     var marker = new AMap.Marker({
37         map: map,
38         position: [ point.getLng(),  point.getLat()]
39     });
40 }
41 
42 //地图中心点添加标注
43 function addCenterPoint(){
44    /*  map.clearMap();
45     var centerPoint = map.getCenter();
46     addMarker(centerPoint); 
47     $pointBox.innerHTML = "当前经纬度为：" + centerPoint.getLng() + ‘,‘ + centerPoint.getLat(); */
48 }
49 addCenterPoint();
50 
51 function geocoder() {
52     map.clearMap();
53     var myGeo = new AMap.Geocoder();
54     //地理编码,返回地理编码结果
55     //alert($addressBox.value);
56     myGeo.getLocation($addressBox.value, function(status, result) {
57         
58         if (status === ‘complete‘ && result.info === ‘OK‘) {
59             //地址解析成功
60             geocoder_CallBack(result);
61         }
62         else{
63             //地址解析失败
64            /*  $pointBox.innerHTML = "查无此地址"; */
65         }
66     });
67 }
68 
69 //地理编码返回结果展示
70 function geocoder_CallBack(data) {
71     var resultStr = "";
72     var geocode = data.geocodes;
73     addMarker(geocode[0].location);
74     resultStr += "当前坐标</b>：" + geocode[0].location.getLng() + ", " + geocode[0].location.getLat();
75     map.setFitView();
76    /*  $pointBox.innerHTML = resultStr; */
77 }
78 
79 map.on(‘moveend‘, function() {
80     addCenterPoint();
81 });
82 </script>
83 </body>
84 </html>
View Code

JSP页面适当位置加入下面代码

技术分享 
<iframe id="amapIframe" name="amapIframe" src="${pageContext.request.contextPath}/easyui/CustomerAddressMap.html" frameBorder="0" width="800" scrolling="no" height="400"></iframe>
View Code

javascript代码

技术分享 
function pickaddressChange(){
                                //获取改变后的取件地址
                                var pickaddress=$("#pickaddressIpt").val();
                                //覆盖原div的html代码
                                window.frames["amapIframe"].document.getElementById("addressBox").value=http://www.mamicode.com/pickaddress; 
                                //window.frames["amapIframe"].document.getElementById("searchDiv").innerHTML="<input id=‘addressBox‘ type=‘hidden‘ value=http://www.mamicode.com/‘广东海洋大学‘/>
"; 
                                //点击amapIframe中的搜索按钮
                                window.frames["amapIframe"].document.getElementById("searchBtn").click(); 
                            }
View Code

 

jsp页面集成 高德地图


联系
我们