高德地图页面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‘> </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>
JSP页面适当位置加入下面代码
<iframe id="amapIframe" name="amapIframe" src="${pageContext.request.contextPath}/easyui/CustomerAddressMap.html" frameBorder="0" width="800" scrolling="no" height="400"></iframe>
javascript代码
function pickaddressChange(){
//获取改变后的取件地址
var pickaddress=$("#pickaddressIpt").val();
//覆盖原div的html代码
window.frames["amapIframe"].document.getElementById("addressBox").value=pickaddress;
//window.frames["amapIframe"].document.getElementById("searchDiv").innerHTML="<input id=‘addressBox‘ type=‘hidden‘ value=‘广东海洋大学‘/><br/><input id=‘searchBtn‘ type=‘hidden‘ onclick=‘geocoder();‘/>";
//点击amapIframe中的搜索按钮
window.frames["amapIframe"].document.getElementById("searchBtn").click();
}
时间： 2024-10-14 04:33:13