mapSearch.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <!DOCTYPE html>
  2. <html class="">
  3. <!--STATUS OK-->
  4. <head>
  5. <meta name="referrer" content="always" />
  6. <meta charset='utf-8' />
  7. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  8. <meta http-equiv="x-dns-prefetch-control" content="on">
  9. <meta name="description" content="">
  10. <meta name="format-detection" content="telephone=no" />
  11. <link rel="stylesheet" type="text/css" href="css/vant-ui.css" />
  12. <link rel="stylesheet" type="text/css" href="css/iconfont.css">
  13. <link rel="stylesheet" type="text/css" href="css/main.css" />
  14. <script src="js/vue.js"></script>
  15. <script src="js/vant-ui.js"></script>
  16. <script src="js/main.js"></script>
  17. <title></title>
  18. </head>
  19. <style>
  20. body {
  21. background: transparent;
  22. }
  23. .pageView.bdjl {
  24. background: transparent;
  25. }
  26. .pageView.bdjl .search {
  27. top : 0rem;
  28. }
  29. </style>
  30. <body>
  31. <div id="app">
  32. <div class="pageView bdjl" style="padding-top: 0rem" id="mescroll" style="margin-top:1.5rem">
  33. <div class="search flex a-center">
  34. <div class="searchbox">
  35. <svg t="1589079341958" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5394" width="22" height="22">
  36. <path d="M883.626667 823.04l-145.066667-144.64A337.92 337.92 0 0 0 810.666667 469.333333a341.333333 341.333333 0 1 0-341.333334 341.333334 337.92 337.92 0 0 0 209.066667-72.106667l144.64 145.066667a42.666667 42.666667 0 0 0 60.586667 0 42.666667 42.666667 0 0 0 0-60.586667zM213.333333 469.333333a256 256 0 1 1 256 256 256 256 0 0 1-256-256z" p-id="5395" fill="#bfbfbf"></path>
  37. </svg>
  38. <input type="search" placeholder="请输入车牌号或联系人" v-model="keyword">
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. </body>
  44. <script type="text/javascript" src="../script/api.js"></script>
  45. <script type="text/javascript" src="../script/httpRequest.js"></script>
  46. <script type="text/javascript" src="../script/vue_plugins.js"></script>
  47. <script type="text/javascript">
  48. apiready = function() {
  49. new Vue({
  50. el: '#app',
  51. data: {
  52. radio: '1',
  53. map: '', // 百度地图
  54. keyword : '',
  55. },
  56. watch : {
  57. keyword : function(nw,ow){
  58. this.getCitysByKeyword();
  59. }
  60. },
  61. methods: {
  62. init: function() {
  63. this.map = api.require('bMap');
  64. if (api.systemType == 'ios') {
  65. map.initMapSDK(function(ret) {
  66. if (ret.status) {}
  67. });
  68. }
  69. },
  70. getCitysByKeyword: function() {
  71. this.map.searchInCity({
  72. city: '烟台市',
  73. keyword: this.keyword,
  74. pageIndex: 0,
  75. pageCapacity: 20
  76. }, function(ret, err) {
  77. if (ret.status) {
  78. console.log(JSON.stringify(ret));
  79. } else {
  80. alert(JSON.stringify(err));
  81. }
  82. });
  83. },
  84. },
  85. mounted: function() {
  86. this.init();
  87. }
  88. })
  89. }
  90. </script>
  91. </html>