分享： 因为百度地图和高德地图没有对应封装好的组件适合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>
扫一扫
4151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
