components_search_vue.html 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta charset="UTF-8">
  8. <title data-i18n='resources.title_componentsSearch_Vue'></title>
  9. <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
  10. <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
  11. <style>
  12. #main {
  13. margin: 0 auto;
  14. width: 100%;
  15. height: 100%;
  16. }
  17. </style>
  18. </head>
  19. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  20. <div id="main">
  21. <sm-web-map server-url='https://iportal.supermap.io/iportal' map-id="801571284">
  22. <!-- 搜索组件: sm-search -->
  23. <!-- 支持的数据:layer-names address-match rest-map rest-data online-local-search-->
  24. <sm-search :layer-names="layerNames" :address-match="addressMatch" :rest-map="restMap" :online-local-search='onlineLocalSearch'></sm-search>
  25. </sm-web-map>
  26. </div>
  27. <script>
  28. new Vue({
  29. el: '#main',
  30. data() {
  31. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  32. return {
  33. layerNames: ["民航数据"],
  34. addressMatch: [
  35. new SuperMap.Components.commontypes.AddressMatchParameter({
  36. url: host + "/iserver/services/addressmatch-Address/restjsr/v1/address"
  37. })
  38. ],
  39. restMap: [
  40. new SuperMap.Components.commontypes.RestMapParameter({
  41. url: host + "/iserver/services/map-world/rest/maps/World",
  42. layerName: "Capitals@World.1",
  43. })
  44. ],
  45. onlineLocalSearch: {
  46. enable: true,
  47. city: "北京市"
  48. }
  49. }
  50. },
  51. })
  52. </script>
  53. </body>
  54. </html>