map.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <link rel="stylesheet" href="<?php echo $mymps_global[SiteUrl]?>/template/global/button.css">
  6. <script language="javascript" src="<?php echo $mymps_global[SiteUrl]?>/template/global/noerr.js"></script>
  7. <script type="text/javascript" language="javascript" src="<?php echo $mymps_global[mapapi]; ?>"></script>
  8. <style>
  9. body{font:Verdana, Arial, Helvetica, sans-serif; text-align:left;}
  10. </style>
  11. <script language="javascript">
  12. function besuremark() {
  13. var point = document.getElementById("result_").value;
  14. if(point == ''){
  15. if(!confirm('您尚未标注地图\n\n确认保存吗?')) return false;
  16. } else {
  17. parent.document.getElementById('mappoint').value =point;
  18. alert('地理位置标注成功!');
  19. }
  20. parent.closeopendiv();
  21. }
  22. </script>
  23. </head>
  24. <body style="margin:10px; font-size:14px;">
  25. <?php if($action == 'markpoint'){?>
  26. 搜索地址:<input id="text_" type="text" style="width:220px;" value=""/>
  27. <div id="searchResultPanel" style="border:1px solid #C0C0C0;height:auto; display:none;"></div>
  28. <font style="display:none">经纬度:<input id="result_" type="text"/></font>
  29. <input type="button" value="确认正确,点我标注" onclick="besuremark();"/>
  30. <?php }?>
  31. <div id="container" style="position: absolute;margin-top:10px; margin-bottom:10px; width: <?php echo $action == 'markpoint'? $width.'px' :'100%';?>; height: <?php echo $height; ?>px;overflow:hidden;"></div>
  32. </body>
  33. </html>
  34. <script type="text/javascript">
  35. function G(id) {
  36. return document.getElementById(id);
  37. }
  38. function showInfo(e){
  39. //alert(e.point.lng + ", " + e.point.lat);
  40. }
  41. function myFun(result){
  42. var cityName = result.name;
  43. map.setCenter(cityName);
  44. }
  45. var map = new BMap.Map("container");
  46. var p1 = "<?php echo $p1; ?>";
  47. var p2 = "<?php echo $p2; ?>";
  48. var view_level = "<?php echo $level; ?>";
  49. map.addControl(new BMap.NavigationControl());
  50. if(p1 != "" && p2 != "") {
  51. var _initPoint = new BMap.Point(p1,p2);
  52. map.centerAndZoom(_initPoint,view_level);
  53. var marker = new BMap.Marker(_initPoint);
  54. map.addOverlay(marker); // 将标注添加到地图中
  55. marker.enableDragging();
  56. marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
  57. } else {
  58. map.centerAndZoom(new BMap.Point(), view_level);
  59. var myCity = new BMap.LocalCity();
  60. myCity.get(myFun);
  61. }
  62. map.enableScrollWheelZoom();
  63. map.enableContinuousZoom();
  64. map.addControl(new BMap.NavigationControl());
  65. map.addControl(new BMap.OverviewMapControl());
  66. map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));
  67. var localSearch = new BMap.LocalSearch(map);
  68. localSearch.enableAutoViewport();
  69. var ac = new BMap.Autocomplete(
  70. {
  71. "input" : "text_",
  72. "location" : map
  73. }
  74. );
  75. ac.addEventListener("onhighlight", function(e) {
  76. var str = "";
  77. var _value = e.fromitem.value;
  78. var value = "";
  79. if (e.fromitem.index > -1) {
  80. value = _value.province + _value.city + _value.district + _value.street + _value.business;
  81. }
  82. str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
  83. value = "";
  84. if (e.toitem.index > -1) {
  85. _value = e.toitem.value;
  86. value = _value.province + _value.city + _value.district + _value.street + _value.business;
  87. }
  88. str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
  89. G("searchResultPanel").innerHTML = str;
  90. });
  91. var myValue;
  92. ac.addEventListener("onconfirm", function(e) {
  93. var _value = e.item.value;
  94. myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
  95. G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
  96. setPlace();
  97. });
  98. function setPlace(){
  99. map.clearOverlays();
  100. function myFun(){
  101. var pp = local.getResults().getPoi(0).point;
  102. document.getElementById("result_").value = pp.lng + "," + pp.lat;
  103. map.centerAndZoom(pp,<?php echo $level; ?>);
  104. var marker = new BMap.Marker(pp);
  105. map.addOverlay(marker);
  106. }
  107. var local = new BMap.LocalSearch(map, {
  108. onSearchComplete: myFun
  109. });
  110. local.search(myValue);
  111. }
  112. map.addEventListener("click", showInfo);
  113. function searchByStationName() {
  114. map.clearOverlays();
  115. var keyword = document.getElementById("text_").value;
  116. localSearch.setSearchCompleteCallback(function (searchResult) {
  117. var poi = searchResult.getPoi(0);
  118. document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat;
  119. map.centerAndZoom(poi.point, <?php echo $level; ?>);
  120. var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));
  121. map.addOverlay(marker);
  122. var content = document.getElementById("text_").value + "<br/><br/>经度:" + poi.point.lng + "<br/>纬度:" + poi.point.lat+"<br/>如有误请输入详细的小区名称重新查询";
  123. var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
  124. marker.openInfoWindow(infoWindow);
  125. marker.setAnimation(BMAP_ANIMATION_BOUNCE);
  126. });
  127. localSearch.search(keyword);
  128. }
  129. </script>