jsp页面集成 高德地图
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jsp页面集成 高德地图相关的知识,希望对你有一定的参考价值。
高德地图页面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(); }
以上是关于jsp页面集成 高德地图的主要内容,如果未能解决你的问题,请参考以下文章