fluidPage(
  tags$head(
    tags$script(HTML("
                // 触发了shiny:inputchanged事件，屏蔽输入引起的改变
                $(document).on('shiny:inputchanged', function(event) {
                    if (event.name === 'address') {
                        event.preventDefault();                    
                    }
                });    
    
                // 点击时触发识别    
                $(document).on('click', '.btn-success', function (evt) {
                      evt.preventDefault(); 
                      var address = document.getElementById('address');
                      if (address.value ==null || address.value ==''){
                         alert('没有输入地址！');
                      }else{
                          try{
                            Shiny.setInputValue('address', address.value);
                          } catch(error){
                            alert(error);
                          }
                      }
                });  
    
              "))
  ),
  
  titlePanel("Shiny 调用地理编码服务示例"), 
  HTML("
            <table width='100%'>
                <tr>
                    <td width='20%'> 
           "),
  selectInput(
    'vendor',
    '地图',
    c('百度','高德','腾讯','天地图'),
    selected = '高德'
  ),
  HTML("
                    </td>
                    <td width='60%'>
           "),
  textInput("address","地址:", value ="珠海市香洲区乐园路88号碧湾花园2栋901", width="400px"),
  HTML("
                    </td>
                    <td width='20%'>
           "),
  actionButton("geocode", "解析并标示", class = "btn-success"),
  HTML("
                    </td>
                    </tr>
                    <tr>
                    <td>
           "),
  textOutput("longlat"),
  HTML("
                    </td>
                    <td  colspan=2>
注：因百度地图的地图调起API及天地图的静态图API嵌入Shiny APP IFRAME碰到问题，还未找到具体原因，转换坐标系后暂时分别在高德、腾讯地图中标注显示。                  
                    </td>
                    </tr>
                    <tr>
                    <td colspan=3>
           "),
  htmlOutput("frame"),
  HTML("
                    </td>
                    </tr>
                    </table>
           ")
)