vue3项目中使用百度地图和高德地图，添加控件，搜索api, 热力图_/api-j/jindu/hotreport

 分享： 因为百度地图和高德地图没有对应封装好的组件适合vue3项目，如果读者是vue2项目就很好写了，vue-baidu-map官方文档 vue-Amap  分别是百度和高德地图 的vue2封装好的组件非常全，如果说我们有功能没有实现，可以在百度、高德的官方api平台进行学习！有收获的话，点赞收藏不迷路~ 蟹蟹

作者：web端项目，vue3 

1.百度地图

<!-- 百度地图的入口文件 -->
 
  <script type="text/javascript"
 
    src="https://api.map.baidu.com/api?v=1.0&type=webgl&您自己的密钥"></script>
 
  <script type="text/javascript"
 
    src="//api.map.baidu.com/api?type=webgl&v=1.0&&您自己的密钥"></script>
 
  <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&&您自己的密钥"></script>
 
 百度地图热力图引入
 
  <script type="text/javascript" src="//api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>

代码如下：vue3项目中可以直接复制体验一下，记得引入入口文件，申请百度的密钥
 
<template>
 
  <div class="border">
 
    <!-- v-if="echartHidden" -->
 
    <div id="container" style="height: 80vh; width: 100%"></div>
 
    <div id="search">
 
      <a-input
 
        v-model:value="searchValue"
 
        @keyup.enter="theLocation"
 
        id="tipinput"
 
        placeholder="请输入要搜索的位置"
 
        style="width: 200px; margin: -3px 0 0 12px"
 
      />
 
      <!-- <input
        type="text"
        style="width: 200px; margin: 12px 0 0 12px"
        @keyup.enter="theLocation"
        id="tipinput"
        placeholder="请输入要搜索的位置"
      /> -->
 
      <div id="searchResultPanel" style="border: 1px solid #c0c0c0; width: 150px; height: auto; display: none"></div>
 
      <a-button type="primary" @click="theLocation">
 
        <template #icon><SearchOutlined /></template>
 
      </a-button>
 
    </div>
 
  </div>
 
</template>
 
<script setup>
 
import http from 'utils/request'
 
 
 
import { SearchOutlined, DownOutlined, CloseOutlined } from '@ant-design/icons-vue'
 
import { ref, onMounted, watch, onUnmounted } from 'vue'
 
const url = {
 
  hotreport: '/api-j/jindu/hotreport'
 
}
 
const searchValue = ref('')
 
const lnglat = ref('')
 
var heatmapOverlays = ref('')
 
const echartHidden = ref(false)
 
 
 
var map = ''
 
var mapData = ''
 
 
 
// 获取热力图api
 
const getHeatmap = async () => {
 
  const heatmapOverlay = new BMapLib.HeatmapOverlay({
 
    radius: 24
 
  })
 
  console.log(map, '--->map')
 
  console.log(heatmapOverlay, '--->heatmapOverlay')
 
  map.addOverlay(heatmapOverlay)
 
  heatmapOverlay.setDataSet({ data: mapData, max: 100 })
 
  heatmapOverlay.show()
 
  // alert(window.getComputedStyle(box, null).height)
 
}
 
 
 
const mapList = async () => {
 
  // 把接口数据做一个修改
 
  const res = await http.get(url.hotreport, { params: {} })
 
  mapData = [...res.data]
 
  mapData.map(item => {
 
    item.count = item.value //这里的count为目标属性名
 
    delete item.value
 
  })
 
}
 
mapList()
 
console.log(mapData)
 
const getMapList = async () => {
 
  BMap = window.BMap
 
  BMapGL = window.BMapGL
 
  console.log(BMap)
 
  console.log(BMapGL)
 
 
 
  map = new BMap.Map('container') // 创建地图实例
 
  var size = new BMap.Size(10, 20)
 
  var point = new BMap.Point(116.4, 39.9) // 创建点坐标
 
  map.centerAndZoom(point, 12)
 
  map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
 
  var opts = { offset: new BMap.Size(1534, 13) } // 添加比例尺控件
 
  map.addControl(new BMap.ScaleControl(opts))
 
  map.addControl(new BMap.MapTypeControl()) //地图的显示类型：包括地图和卫星
 
 
 
  // 测试控件
 
  map.addControl(new BMap.NavigationControl()) // 添加缩放控件
 
  map.addControl(new BMap.CityListControl({ showPanel: true })) // 添加城市列表控件
 
 
 
  // 下面是搜索功能标注加精确定位
 
  let marker = new BMap.Marker(point)
 
  map.addOverlay(marker)
 
  var ac = new BMap.Autocomplete({
 
    //建立一个自动完成的对象
 
    input: 'tipinput',
 
    location: map
 
  })
 
 
 
  ac.addEventListener('onhighlight', function (e) {
 
    console.log(e)
 
 
 
    //鼠标放在下拉列表上的事件
 
    var str = ''
 
    var _value = e.fromitem.value
 
    console.log(e.fromitem.value)
 
 
 
    var value = ''
 
    if (e.fromitem.index > -1) {
 
      value = _value.province + _value.city + _value.district + _value.street + _value.business
 
    }
 
    str = 'FromItem<br />index = ' + e.fromitem.index + '<br />value = ' + value
 
 
 
    value = ''
 
    if (e.toitem.index > -1) {
 
      _value = e.toitem.value
 
      value = _value.province + _value.city + _value.district + _value.street + _value.business
 
    }
 
    str += '<br />ToItem<br />index = ' + e.toitem.index + '<br />value = ' + value
 
    G('searchResultPanel').innerHTML = str
 
  })
 
 
 
  var myValue
 
  ac.addEventListener('onconfirm', function (e) {
 
    //鼠标点击下拉列表后的事件
 
    var _value = e.item.value
 
    console.log(e.item.value)
 
 
 
    myValue = _value.province + _value.city + _value.district + _value.street + _value.business
 
    G('searchResultPanel').innerHTML = 'onconfirm<br />index = ' + e.item.index + '<br />myValue = ' + myValue
 
    map.centerAndZoom(myValue, 11)
 
    setPlace()
 
  })
 
 
 
  function setPlace() {
 
    map.clearOverlays() //清除地图上所有覆盖物
 
    function myFun() {
 
      var pp = local.getResults().getPoi(0).point //获取第一个智能搜索的结果
 
      map.centerAndZoom(pp, 18)
 
      map.addOverlay(new BMap.Marker(pp)) //添加标注
 
    }
 
    var local = new BMap.LocalSearch(map, {
 
      //智能搜索
 
      onSearchComplete: myFun
 
    })
 
    local.search(myValue)
 
  }
 
}
 
 
 
onMounted(() => {
 
  getMapList()
 
 
 
  //一定要先让地图加载出来才加载热力图，我这里做演示直接写个setTimeout了
 
  setTimeout(() => {
 
    getHeatmap()
 
  }, 4000)
 
  // window.onresize = getHeatmap
 
})
 
 
 
// 创建搜索的api
 
const theLocation = () => {
 
  var city = document.getElementById('tipinput').value
 
  if (city != '') {
 
    // map.centerAndZoom({ lng: 110.404, lat: 36.915 }, 11)
 
    // 必须输入完成的城市名才可以搜索 比如北京市
 
    map.centerAndZoom(city, 11) // 用城市名设置地图中心点
 
  }
 
}
 
 
 
// 创建提示的api
 
function G(id) {
 
  return document.getElementById(id)
 
}
 
// watch(map, () => {
 
//   // getHeatmap()
 
// })
 
// 销毁阶段
 
// onUnmounted(() => {
 
//   echartHidden.value = true
 
// })
 
</script>
 
<style scoped lang="scss">
 
.border {
 
  border-width: 0px;
 
  left: 0px;
 
  top: 0px;
 
  background: inherit;
 
  background-color: rgba(54, 62, 83, 1);
 
  box-sizing: border-box;
 
  border-width: 1px;
 
  border-style: solid;
 
  border-color: rgba(74, 124, 255, 1);
 
  border-radius: 0px;
 
  -moz-box-shadow: 2px 2px 3px rgba(74, 124, 255, 0.541176470588235);
 
  -webkit-box-shadow: 2px 2px 3px rgba(74, 124, 255, 0.541176470588235);
 
  box-shadow: 2px 2px 3px rgba(74, 124, 255, 0.541176470588235);
 
  cursor: default !important;
 
}
 
#search {
 
  z-index: 999;
 
  position: absolute;
 
  left: 233px;
 
  top: 80px;
 
  opacity: 1;
 
}
 
:deep(.ui_city_change_inner) {
 
  position: relative;
 
  height: 34px;
 
  left: 280px;
 
  top: 23px;
 
}
 
:deep(.BMap_CityListCtrl .citylist_popup_main) {
 
  left: 280px;
 
  top: 33px;
 
}
 
:deep(.ui_city_change_top .ui_city_change_inner) {
 
  height: 30px;
 
  line-height: 30px;
 
}
 
:deep(.BMap_stdMpType0 .BMap_stdMpZoom) {
 
  top: 670px !important;
 
  right: -1640px !important;
 
}
 
</style>

2.高德地图

代码如下：vue3项目中可以直接复制体验一下

高德地图引入的文件
 
 <script type="text/javascript">
 
    window._AMapSecurityConfig = {
 
      securityJsCode: '786684d82538b07ac4d603654b118254',
 
    }
 
  </script>
 
  <script type="text/javascript"
 
    src="https://webapi.amap.com/maps?v=1.4.15&您自己的密钥&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.ToolBar,AMap.DistrictSearch"></script>
 
  <script type="text/javascript"
 
    src="https://webapi.amap.com/loca?v=1.3.2&您自己的密钥"></script>
 
  <script src="//a.amap.com/Loca/static/mock/heatmapData.js"></script>
 
  <!-- 高德行政区选择控件 -->
 
  <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
 
  <!-- 高德地图的行政区搜索框 -->  
要主要这个css会影响其他组件，我的解决方案是把这个链接打开后，把对应的样式进行在对应 的组件中使用，一定要加scoped
 
  <!-- <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /> -->

<template>
 
  <div class="border">
 
    <!-- v-if="echartHidden" -->
 
    <div id="container" style="height: 80vh; width: 100%"></div>
 
    <div id="search">
 
      <a-input
 
        v-model:value="searchValue"
 
        @keyup.enter="seachAddress"
 
        id="tipinput"
 
        placeholder="请输入要搜索的位置"
 
        style="width: 200px; margin: -1px 2px 0 12px"
 
      />
 
      <a-button type="primary" @click="seachAddress">
 
        <template #icon><SearchOutlined /></template>
 
      </a-button>
 
    </div>
 
    <div class="input-card">
 
      <h4>行政区城市查询</h4>
 
      <div class="input-item">
 
        <div class="input-item-prepend"><span class="input-item-text">省市区</span></div>
 
        <select id="province" style="width: 100px" @change="searchLocation"></select>
 
      </div>
 
      <div class="input-item">
 
        <div class="input-item-prepend"><span class="input-item-text">地级市</span></div>
 
        <select id="city" style="width: 100px" @change="searchLocation"></select>
 
      </div>
 
      <div class="input-item">
 
        <div class="input-item-prepend"><span class="input-item-text">区县</span></div>
 
        <select id="district" style="width: 100px" @change="searchLocation"></select>
 
      </div>
 
      <div class="input-item">
 
        <div class="input-item-prepend"><span class="input-item-text">街道</span></div>
 
        <select id="street" style="width: 100px" @change="setCenter"></select>
 
      </div>
 
    </div>
 
  </div>
 
</template>
<script setup>
 
import http from 'utils/request'
 
// import './GaoDeMap.css'
 
import { SearchOutlined } from '@ant-design/icons-vue'
 
import { onMounted, ref, reactive } from 'vue'
 
import AMapLoader from '@amap/amap-jsapi-loader'
 
const url = {
 
  hotreport: '/api-j/jindu/hotreport'
 
}
 
const searchValue = ref('')
 
const lnglat = ref('')
 
// const gdmap = reactive({})
 
onMounted(() => {
 
  getList()
 
})
 
 
 
var map,
 
  district,
 
  polygons = [],
 
  citycode
 
 
 
async function getList() {
 
  const res = await http.get(url.hotreport, { params: {} })
 
  if (res.code === 0) {
 
    initMap(
 
      res.data.map(el => {
 
        return {
 
          coordinate: [el.lng, el.lat],
 
          count: el.value
 
        }
 
      })
 
    )
 
  }
 
}
 
var gdmap
 
// 基础配置一下Echarts
 
function initMap(data) {
 
  //地图初始化
 
  gdmap = new AMap.Map('container', {
 
    resizeEnable: true, //是否监控地图容器尺寸变化
 
    zoom: 12, //地图显示的缩放级别
 
    zooms: [3, 18], //地图显示的缩放级别范围在PC上，默认为[3,18]，取值范围[3-18]；
 
    viewMode: '2D', //默认为‘2D’，可选’3D’，选择‘3D’会显示 3D 地图效果
 
    center: [116.397428, 39.90923] //地图中心点坐标
 
  })
 
  var layer = new Loca.HeatmapLayer({
 
    map: gdmap
 
  })
 
  layer.setData(data, {
 
    lnglat: 'coordinate',
 
    value: 'count'
 
  })
 
 
 
  layer.setOptions({
 
    style: {
 
      radius: 16,
 
      color: {
 
        0.5: '#2c7bb6',
 
        0.65: '#abd9e9',
 
        0.7: '#ffffbf',
 
        0.9: '#fde468',
 
        1.0: '#d7191c'
 
      }
 
    }
 
  })
 
  layer.render()
 
  var autoOptions = {
 
    input: 'tipinput'
 
  }
 
  var auto = new AMap.Autocomplete(autoOptions)
 
  var placeSearch = new AMap.PlaceSearch({
 
    map: gdmap
 
  }) //构造地点查询类
 
  AMap.event.addListener(auto, 'select', select) //注册监听，当选中某条记录时会触发
 
  function select(e) {
 
    placeSearch.setCity(e.poi.adcode)
 
    placeSearch.search(e.poi.name) //关键字查询查询
 
  }
 
 
 
  const toolBar = new AMap.ToolBar({
 
    liteStyle: true
 
  })
 
  gdmap.addControl(toolBar)
 
}
 
const searchLocation = obj => {
 
  console.log(obj)
 
  //清除地图上所有覆盖物
 
  for (var i = 0, l = polygons.length; i < l; i++) {
 
    polygons[i].setMap(null)
 
  }
 
  // var option = obj[obj.target.selectedIndex];
 
  let option = obj.target[obj.target.selectedIndex]
 
  obj.target[obj.target.selectedIndex]
 
  var keyword = option.text //关键字
 
  var adcode = option.adcode
 
  district.setLevel(option.value) //行政区级别
 
  district.setExtensions('all')
 
  //行政区查询
 
  //按照adcode进行查询可以保证数据返回的唯一性
 
  district.search(adcode, function (status, result) {
 
    if (status === 'complete') {
 
      getData(result.districtList[0], obj.target.id)
 
    }
 
  })
 
}
 
function setCenter(obj) {
 
  let option = obj.target[obj.target.selectedIndex]
 
  gdmap.setCenter(option.center)
 
}
 
 
 
//行政区划查询
 
var opts = {
 
  subdistrict: 1, //返回下一级行政区
 
  showbiz: false //最后一级返回街道信息
 
}
 
 
 
district = new AMap.DistrictSearch(opts) //注意：需要使用插件同步下发功能才能这样直接使用
 
district.search('中国', function (status, result) {
 
  if (status == 'complete') {
 
    getData(result.districtList[0])
 
  }
 
})
 
 
 
function getData(data, level) {
 
  var citySelect = document.getElementById('city')
 
  var districtSelect = document.getElementById('district')
 
  var areaSelect = document.getElementById('street')
 
  var bounds = data.boundaries
 
  if (bounds) {
 
    for (var i = 0, l = bounds.length; i < l; i++) {
 
      var polygon = new AMap.Polygon({
 
        map: gdmap,
 
        strokeWeight: 1,
 
        strokeColor: '#0091ea',
 
        fillColor: '#80d8ff',
 
        fillOpacity: 0.2,
 
        path: bounds[i]
 
      })
 
      polygons.push(polygon)
 
    }
 
    gdmap.setFitView() //地图自适应
 
  }
 
 
 
  //清空下一级别的下拉列表
 
  if (level === 'province') {
 
    citySelect.innerHTML = ''
 
    districtSelect.innerHTML = ''
 
    areaSelect.innerHTML = ''
 
  } else if (level === 'city') {
 
    districtSelect.innerHTML = ''
 
    areaSelect.innerHTML = ''
 
  } else if (level === 'district') {
 
    areaSelect.innerHTML = ''
 
  }
 
 
 
  var subList = data.districtList
 
  if (subList) {
 
    var contentSub = new Option('--请选择--')
 
    var curlevel = subList[0].level
 
    var curList = document.querySelector('#' + curlevel)
 
    curList.add(contentSub)
 
    for (var i = 0, l = subList.length; i < l; i++) {
 
      var name = subList[i].name
 
      var levelSub = subList[i].level
 
      var cityCode = subList[i].citycode
 
      contentSub = new Option(name)
 
      contentSub.setAttribute('value', levelSub)
 
      contentSub.center = subList[i].center
 
      contentSub.adcode = subList[i].adcode
 
      curList.add(contentSub)
 
    }
 
  }
 
}
 
 
 
const seachAddress = () => {
 
  if (searchValue.value != '') {
 
    //清楚地图上的覆盖物
 
    gdmap.clearMap()
 
    console.log('搜索')
 
    gdmap.plugin('AMap.PlaceSearch', () => {
 
      let placeSearch = new AMap.PlaceSearch({
 
        // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
 
        city: '0797',
 
        map: gdmap
 
      })
 
      let that = this
 
      placeSearch.search(searchValue.value, function (status, result) {
 
        // 查询成功时，result即对应匹配的POI信息
 
        console.log(result)
 
        var pois = result.poiList.pois
 
        for (var i = 0; i < pois.length; i++) {
 
          var poi = pois[i]
 
          var marker = []
 
          marker[i] = new AMap.Marker({
 
            position: poi.location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
 
            title: poi.name
 
          })
 
          // 将创建的点标记添加到已有的地图实例：
 
          gdmap.add(marker[i])
 
        }
 
        gdmap.setFitView()
 
        AMap.event.addListener(placeSearch, 'markerClick', function (data) {
 
          console.log(data)
 
          let result = data
 
          //经纬度
 
          let lng = result.event.lnglat.lng
 
          let lat = result.event.lnglat.lat
 
          lnglat.value = lng + ',' + lat
 
          //地址
 
          //   that.address = result.data.address;
 
          //   //最近路口
 
          //   that.nearestJunction = "";
 
          //   //最近的路
 
          //   that.nearestRoad = "";
 
          //   //最近的POI
 
          //   that.nearestPOI = "";
 
        })
 
      })
 
    })
 
  } else {
 
    alert('请输入地址')
 
  }
 
}
 
 
 
//判断浏览区是否支持canvas
 
function isSupportCanvas() {
 
  var elem = document.createElement('canvas')
 
  return !!(elem.getContext && elem.getContext('2d'))
 
}
 
</script>
 
 
 
<style scoped>
 
.border {
 
  border-width: 0px;
 
  left: 0px;
 
  top: 0px;
 
  background: inherit;
 
  background-color: rgba(54, 62, 83, 1);
 
  box-sizing: border-box;
 
  border-width: 1px;
 
  border-style: solid;
 
  border-color: rgba(74, 124, 255, 1);
 
  border-radius: 0px;
 
  -moz-box-shadow: 2px 2px 3px rgba(74, 124, 255, 0.541176470588235);
 
  -webkit-box-shadow: 2px 2px 3px rgba(74, 124, 255, 0.541176470588235);
 
  box-shadow: 2px 2px 3px rgba(74, 124, 255, 0.541176470588235);
 
}
 
#search {
 
  z-index: 999;
 
  position: absolute;
 
  left: 233px;
 
  top: 80px;
 
  opacity: 0.8;
 
}
 
.amap-controls {
 
  position: absolute;
 
  bottom: 12px;
 
  right: 12px;
 
}
 
.input-card {
 
  bottom: 45rem !important;
 
}
 
 
 
html {
 
  font-size: 12px;
 
}
 
.amap-copyright {
 
  box-sizing: content-box;
 
}
 
* {
 
  box-sizing: border-box;
 
}
 
.input-textarea {
 
  color: grey;
 
  height: 8em;
 
  overflow: auto;
 
  border-radius: 0.4rem;
 
  border: 1px solid #ced4da;
 
  margin-bottom: 1rem;
 
}
 
body {
 
  margin: 0;
 
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
 
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
  line-height: 1.5;
 
  font-weight: 300;
 
  color: #111213;
 
}
 
 
 
hr {
 
  margin: 0.5rem 0;
 
  box-sizing: content-box;
 
  height: 0;
 
  overflow: visible;
 
  border: 0;
 
  border-top: 1px solid rgba(0, 0, 0, 0.1);
 
}
 
 
 
p {
 
  margin-top: 0;
 
  margin-bottom: 0;
 
}
 
 
 
label {
 
  display: inline-block;
 
  margin-bottom: 0.4rem;
 
}
 
 
 
label,
 
.btn {
 
  margin-left: 0;
 
  font-size: 1rem;
 
}
 
 
 
button,
 
input,
 
select {
 
  margin: 0;
 
  font-family: inherit;
 
  font-size: inherit;
 
  line-height: inherit;
 
  overflow: visible;
 
  text-transform: none;
 
}
 
 
 
[type='button']::-moz-focus-inner,
 
[type='reset']::-moz-focus-inner,
 
[type='submit']::-moz-focus-inner,
 
button::-moz-focus-inner {
 
  padding: 0;
 
  border-style: none;
 
}
 
 
 
input[type='checkbox'],
 
input[type='radio'] {
 
  box-sizing: border-box;
 
  padding: 0;
 
  -webkit-box-sizing: border-box;
 
  box-sizing: border-box;
 
  padding: 0;
 
  margin: 0 0.5rem 0 0;
 
}
 
 
 
h4 {
 
  font-family: inherit;
 
  line-height: 1.8;
 
  font-weight: 300;
 
  color: inherit;
 
  font-size: 1rem;
 
  margin-top: 0;
 
  margin-bottom: 0.5rem;
 
}
 
 
 
.btn {
 
  display: inline-block;
 
  font-weight: 400;
 
  text-align: center;
 
  white-space: nowrap;
 
  vertical-align: middle;
 
  -webkit-user-select: none;
 
  -moz-user-select: none;
 
  -ms-user-select: none;
 
  user-select: none;
 
  border: 1px solid transparent;
 
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
 
    box-shadow 0.15s ease-in-out;
 
  background-color: transparent;
 
  background-image: none;
 
  color: #25a5f7;
 
  border-color: #25a5f7;
 
  padding: 0.25rem 0.5rem;
 
  line-height: 1.5;
 
  border-radius: 1rem;
 
  -webkit-appearance: button;
 
  cursor: pointer;
 
}
 
 
 
.btn:hover {
 
  color: #fff;
 
  background-color: #25a5f7;
 
  border-color: #25a5f7;
 
}
 
 
 
.btn:hover {
 
  text-decoration: none;
 
}
 
 
 
.input-item {
 
  position: relative;
 
  display: -ms-flexbox;
 
  display: flex;
 
  -ms-flex-wrap: wrap;
 
  flex-wrap: wrap;
 
  -ms-flex-align: center;
 
  align-items: center;
 
  width: 100%;
 
  height: 3rem;
 
}
 
 
 
.input-item:last-child {
 
  margin-bottom: 0;
 
}
 
 
 
.input-item > select,
 
.input-item > input[type='text'],
 
.input-item > input[type='date'] {
 
  position: relative;
 
  -ms-flex: 1 1 auto;
 
  flex: 1 1 auto;
 
  width: 1%;
 
  margin-bottom: 0;
 
}
 
 
 
.input-item > select:not(:last-child),
 
.input-item > input[type='text']:not(:last-child),
 
.input-item > input[type='date']:not(:last-child) {
 
  border-top-right-radius: 0;
 
  border-bottom-right-radius: 0;
 
}
 
 
 
.input-item > select:not(:first-child),
 
.input-item > input[type='text']:not(:first-child),
 
.input-item > input[type='date']:not(:first-child) {
 
  border-top-left-radius: 0;
 
  border-bottom-left-radius: 0;
 
}
 
 
 
.input-item-prepend {
 
  margin-right: -1px;
 
}
 
 
 
.input-item-text,
 
input[type='text'],
 
input[type='date'],
 
select {
 
  height: calc(2.2rem + 2px);
 
}
 
 
 
.input-item-text {
 
  width: 6rem;
 
  text-align: justify;
 
  padding: 0.4rem 0.7rem;
 
  display: inline-block;
 
  text-justify: distribute-all-lines;
 
  /*ie6-8*/
 
  text-align-last: justify;
 
  /* ie9*/
 
  -moz-text-align-last: justify;
 
  /*ff*/
 
  -webkit-text-align-last: justify;
 
  /*chrome 20+*/
 
  -ms-flex-align: center;
 
  align-items: center;
 
  margin-bottom: 0;
 
  font-size: 1rem;
 
  font-weight: 400;
 
  line-height: 1.5;
 
  color: #495057;
 
  text-align: center;
 
  white-space: nowrap;
 
  background-color: #e9ecef;
 
  border: 1px solid #ced4da;
 
  border-radius: 0.25rem;
 
  border-bottom-right-radius: 0;
 
  border-top-right-radius: 0;
 
}
 
 
 
.input-item-text input[type='checkbox'],
 
.input-item-text input[type='radio'] {
 
  margin-top: 0;
 
}
 
 
 
.input-card {
 
  display: flex;
 
  flex-direction: column;
 
  min-width: 0;
 
  word-wrap: break-word;
 
  background-color: #fff;
 
  background-clip: border-box;
 
  border-radius: 0.25rem;
 
  width: 18rem;
 
  border-width: 0;
 
  border-radius: 0.4rem;
 
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
 
  position: fixed;
 
  bottom: 1rem;
 
  right: 1rem;
 
  -ms-flex: 1 1 auto;
 
  flex: 1 1 auto;
 
  padding: 0.75rem 1.25rem;
 
}
 
 
 
.input-text {
 
  line-height: 2rem;
 
  margin-right: 2rem;
 
}
 
 
 
.info hr {
 
  margin-right: 0;
 
  margin-left: 0;
 
  border-top-color: grey;
 
}
 
 
 
.info {
 
  padding: 0.75rem 1.25rem;
 
  margin-bottom: 1rem;
 
  border-radius: 0.25rem;
 
  position: fixed;
 
  top: 1rem;
 
  background-color: white;
 
  width: auto;
 
  min-width: 22rem;
 
  border-width: 0;
 
  right: 1rem;
 
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
 
}
 
 
 
.code {
 
  left: 1.5rem;
 
  right: 1.5rem;
 
  top: 1.5rem;
 
  bottom: 1.5rem;
 
  overflow: auto;
 
  margin-bottom: 0rem;
 
}
 
 
 
.code .btn {
 
  top: 1rem;
 
  position: absolute;
 
  right: 1rem;
 
}
 
 
 
.code .result {
 
  border: 1px solid rgba(0, 0, 0, 0.1);
 
  border-radius: 0.5rem;
 
  padding: 1rem;
 
  bottom: 1rem;
 
  position: absolute;
 
  top: 5.5rem;
 
  right: 1rem;
 
  left: 1rem;
 
  overflow: auto;
 
}
 
 
 
.code .status {
 
  color: #80adff;
 
  display: inline-block;
 
  font-size: 14px;
 
}
 
 
 
.code h4 {
 
  display: inline-block;
 
  max-width: 10rem;
 
  margin-right: 1rem;
 
  margin-bottom: 1rem;
 
}
 
 
 
select,
 
input[type='text'],
 
input[type='date'] {
 
  display: inline-block;
 
  width: 100%;
 
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
 
  line-height: 1.5;
 
  color: #495057;
 
  vertical-align: middle;
 
  background: #fff
 
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
 
    no-repeat right 0.75rem center;
 
  background-size: 8px 10px;
 
  border: 1px solid #ced4da;
 
  border-radius: 0.25rem;
 
  -webkit-appearance: none;
 
  -moz-appearance: none;
 
  appearance: none;
 
}
 
 
 
input[type='text'],
 
input[type='date'] {
 
  background: #fff;
 
  padding: 0.375rem 0.75rem;
 
}
 
 
 
select:focus,
 
input[type='text']:focus,
 
input[type='date']:focus {
 
  border-color: #80bdff;
 
  outline: 0;
 
  box-shadow: 0 0 0 0.1rem rgba(128, 189, 255, 0.1);
 
}
 
 
 
.btn:focus {
 
  outline: 0;
 
  box-shadow: none;
 
}
 
 
 
select:focus::-ms-value,
 
input[type='text']:focus::-ms-value,
 
input[type='date']:focus::-ms-value {
 
  color: #495057;
 
  background-color: #fff;
 
}
 
 
 
/* native toastr */
 
.native-toast {
 
  position: fixed;
 
  background-color: rgba(50, 50, 50, 0.8);
 
  border-radius: 33px;
 
  color: white;
 
  left: 50%;
 
  text-align: center;
 
  padding: 6px 12px;
 
  opacity: 0;
 
  z-index: 99999;
 
  transition: transform 0.25s, opacity 0.25s, top 0.25s;
 
  box-sizing: border-box;
 
}
 
 
 
.native-toast-bottom {
 
  bottom: 50px;
 
  -ms-transform: translateX(-50%) translateY(50px);
 
  transform: translateX(-50%) translateY(50px);
 
}
 
 
 
.native-toast-bottom.native-toast-shown {
 
  opacity: 1;
 
  -ms-transform: translateX(-50%) translateY(0);
 
  transform: translateX(-50%) translateY(0);
 
}
 
 
 
.native-toast-bottom.native-toast-edge {
 
  bottom: 0;
 
}
 
 
 
.native-toast-top {
 
  top: 50px;
 
  -ms-transform: translateX(-50%) translateY(-50px);
 
  transform: translateX(-50%) translateY(-50px);
 
}
 
 
 
.native-toast-top.native-toast-shown {
 
  opacity: 1;
 
  -ms-transform: translateX(-50%) translateY(0);
 
  transform: translateX(-50%) translateY(0);
 
}
 
 
 
.native-toast-top.native-toast-edge {
 
  top: 0;
 
}
 
 
 
.native-toast-center {
 
  top: 0;
 
  -ms-transform: translateX(-50%) translateY(-50px);
 
  transform: translateX(-50%) translateY(-50px);
 
}
 
 
 
.native-toast-center.native-toast-shown {
 
  opacity: 1;
 
  top: 50%;
 
  -ms-transform: translateX(-50%) translateY(-50%);
 
  transform: translateX(-50%) translateY(-50%);
 
}
 
 
 
.native-toast-edge {
 
  border-radius: 0;
 
  width: 100%;
 
  text-align: left;
 
}
 
 
 
@media screen and (min-width: 40rem) {
 
  .native-toast:not(.native-toast-edge) {
 
    max-width: 18rem;
 
  }
 
}
 
 
 
/*
  max-width does not seem to work in small screen?
*/
 
 
 
/*@media screen and (max-width: 768px) {
  .native-toast:not(.native-toast-edge) {
    max-width: 400px;
  }
}
@media screen and (max-width: 468px) {
  .native-toast:not(.native-toast-edge) {
    max-width: 300px;
  }
}*/
 
 
 
/* types */
 
 
 
.native-toast-error {
 
  background-color: #d92727;
 
  color: white;
 
}
 
 
 
.native-toast-success {
 
  background-color: #62a465;
 
  color: white;
 
}
 
 
 
.native-toast-warning {
 
  background-color: #fdaf17;
 
  color: white;
 
}
 
 
 
.native-toast-info {
 
  background-color: #5060ba;
 
  color: white;
}
 
 
 
[class^='native-toast-icon-'] {
 
  vertical-align: middle;
 
  margin-right: 8px;
 
}
 
 
 
[class^='native-toast-icon-'] svg {
 
  width: 16px;
 
  height: 16px;
 
}
 
</style>