Geographical Search

Pattern

• Size/Position
  • Size: width and height of the component. Unit: pixel.
  • Position: position where the component is located in the canvas. Unit: pixel.
  Figure 1 Geographical search
  
• Pattern
  • Text: prompt information of the component.
  • adcode: If this option is selected, the code of the geographical location is displayed.
  • Font Size: font size of the component text.
  • Font Width: font width of the component text.
  • Font Color: font color of the component text.
  • Background Color: to set the background color of the component by clicking the editor.
  • Border: to set the border style of the component, including the border width, border color, and border type.
  • Arrow: Set Color, Size, and Right Margin of arrows.
• Drop-Down List Style
  • Max. Height: the maximum height of the drop-down list box when the component is expanded.
  • Font Color: font color of the text in the drop-down list when the component is expanded.
  • Font Size: font size of the text in the drop-down list box when the component is expanded.
  • Background Color: background color of the drop-down list when the component is expanded.
• Initial Setting
  • Initial Setting: When this function is enabled, the area specified by Initial Value is displayed by default during preview or sharing.
  • Initial Value: You can enter the name of a province, city, or county, or enter the region code.

Data

The example data in the preceding figure is as follows:

[
  {
"name": "Beijing",
    "adcode": "110000",
    "level": "province",
"parent": "PRC"
  },
  {
"name": "Tianjin",
    "adcode": "120000",
    "level": "province",
"parent": "PRC"
  },
  {
"name": "Hebei",
    "adcode": "130000",
    "level": "province",
"parent": "PRC"
  },
  {
"name": "Shanxi",
    "adcode": "140000",
    "level": "province",
"parent": "PRC"
  }
]

• name: name of the region.
• adcode: code of the region.
• level: level of the region.
• parent: upper-level city of the region.

Interaction

For details about whether the component supports the interaction function and how to use the interaction function, see Configuring Component Interaction.