map.html 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Baidu Maps</title>
  6. <style>
  7. html { height:100%; }
  8. body { height:100%;margin:0;padding:0;background-color:#fff; }
  9. #search_box{position:fixed;top:5px;right:5px;z-index:9999;}
  10. #search_box input{
  11. -webkit-appearance: none;
  12. border-radius:3px;
  13. box-sizing:border-box;
  14. outline:0;
  15. box-shadow:0 0 3px rgba(0,0,0,0.4);
  16. }
  17. #search_box input[type="text"]{
  18. background-color:#fff;
  19. border:1px solid #ccc;
  20. color:#000;
  21. width:180px;
  22. padding:5px;
  23. font-size:16px;
  24. opacity:0.7;
  25. box-shadow:0 0 3px rgba(0,0,0,0.4);
  26. }
  27. #search_box input[type="button"]{
  28. margin-left:5px;
  29. background-color:#207ab7;
  30. border:1px solid #207ab7;
  31. color:#fff;
  32. padding:4px 6px;
  33. font-size:14px;
  34. }
  35. </style>
  36. <script charset="utf-8" src="http://api.map.baidu.com/api?v=3.0&ak=ONwdanPtvCDLHBSm184T2ynP"></script>
  37. <script>
  38. var editor=parent.tinymce.activeEditor;
  39. function insCnt(txt){
  40. editor.insertContent(txt);
  41. parent.tinymce.activeEditor.windowManager.close();
  42. }
  43. var map, geocoder;
  44. var lng,lat;
  45. function initialize() {
  46. map = new BMap.Map('map_canvas');
  47. var point = new BMap.Point(116.331398,39.897445);
  48. map.centerAndZoom(point, 14);
  49. map.addControl(new BMap.NavigationControl());
  50. //map.enableScrollWheelZoom();
  51. //根据IP定位
  52. var myCity = new BMap.LocalCity();
  53. myCity.get(function(result){map.setCenter(result.name);});
  54. //浏览器定位,位置更准确,但需要弹出确认,扰民弃用
  55. /*var gl = new BMap.Geolocation();
  56. gl.getCurrentPosition(function(r){
  57. if(this.getStatus() == BMAP_STATUS_SUCCESS){
  58. var mk = new BMap.Marker(r.point);
  59. map.addOverlay(mk);
  60. map.panTo(r.point);
  61. }else {
  62. //alert('failed'+this.getStatus());
  63. }
  64. },{enableHighAccuracy: true})*/
  65. var gc = new BMap.Geocoder();
  66. gc.getLocation(point, function(rs){
  67. var addComp = rs.addressComponents;
  68. var address = [addComp.city].join('');
  69. //console.log(address);
  70. });
  71. map.addEventListener('click',function(e){
  72. //alert(e.point.lng + "," + e.point.lat);
  73. lng=e.point.lng;
  74. lat=e.point.lat;
  75. var marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));
  76. map.clearOverlays();
  77. map.addOverlay(marker);
  78. //insCnt(lng+','+lat);
  79. parent.tinymceLng=lng;
  80. parent.tinymceLat=lat;
  81. });
  82. document.getElementById('kw').addEventListener('keypress',function(e){
  83. if(e.keyCode=='13'){
  84. e.preventDefault();
  85. searchByStationName();
  86. }
  87. });
  88. }
  89. function searchByStationName() {
  90. var localSearch = new BMap.LocalSearch(map);
  91. //localSearch.enableAutoViewport(); //允许自动调节窗体大小
  92. map.clearOverlays();//清空原来的标注
  93. var keyword = document.getElementById("kw").value;
  94. localSearch.setSearchCompleteCallback(function (searchResult) {
  95. console.log(searchResult);
  96. if(searchResult.Qq.length==0){
  97. alert('搜索不到该地区');
  98. return false;
  99. }
  100. var poi = searchResult.getPoi(0);
  101. map.centerAndZoom(poi.point, 14);
  102. var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));
  103. parent.tinymceLng=poi.point.lng;
  104. parent.tinymceLat=poi.point.lat;
  105. map.addOverlay(marker);
  106. });
  107. localSearch.search(keyword);
  108. return false;
  109. }
  110. </script>
  111. </head>
  112. <body onload="initialize();">
  113. <div id="search_box"><input id="kw" type="text" value="" autocomplete="off" placeholder="输入要搜索的地点" /><input type="button" value="搜索" onclick="searchByStationName()"></div>
  114. <div id="map_canvas" style="width:100%; height:100%"></div>
  115. </body>
  116. </html>