效果图：
1、点击任何一处显示坐标信息（坐标拾取）
2、显示车辆轨迹与停车点，点击显示信息
3、poi搜索
<template>
<div id="ploygon">
<!-- 地址poi搜索框 -->
<div style="position: relative">
<div
class="map-input"
style="
position: absolute;
top: 20px;
left: 20px;
z-index: 9999;
background: #fff;
box-shadow: 3px 3px 3px 0px #c8c8c8;
font-size: 12px;
"
>
<input
type="text"
:id="mapinputId"
autocomplete="off"
placeholder="请输入地址"
style="
width: 270px;
outline: none;
border: none;
height: 35px;
padding-left: 7px;
"
/>
</div>
<!-- 地图 -->
<div :id="mapName" :style="{ height: mapHeight + 'px' }"></div>
</div>
</div>
</template>
<script>
export default {
props: {
/*
当多页面同时打开，如果不用不同ID，会出现渲染问题，地图和搜索框都是
*/
// 地图id
mapName: {
type: String,
default: 'map',
},
// 地图搜索框的ID
mapinputId: {
type: String,
default: 'mapinput',
},
// 是否使用轨迹
isUsePath: {
type: Boolean,
default: true,
},
// 门点地址（用于反填）
doorAddress: {
type: String,
default: '',
},
// 地图高度
mapHeight: {
type: Number,
default: 450,
},
// 轨迹数据 例如:[{adr: null,ext: null,lat: "30.698875",lon: "121.173890",ltm: "2021-11-29 16:34:31",spd: "0.0",src: "ZHI_YUN"}]
pathList: {
type: Array,
default: [],
},
// 停车点数据 例如:[{address: null,duration: 60,endTime: "2021-11-29 16:35:31"，lat: "30.699462",lon: "121.173985",startTime: "2021-11-29 16:34:31"}]
stops: {
type: Array,
default: [],
},
},
watch: {},
data() {
return {
addressInfo: {},
doorCircle: {},
lnglatMaker: {},
doorMarker: {},
map: undefined,
path: undefined,
doorInfoWindow: {},
cilckDoorInfoWindow: {},
clickMaker: null,
trackList: [],
stopList: [],
markerStart: undefined,
markerEnd: undefined,
timer: null,
inputData: {},
}
},
mounted() {},
destroyed() {
clearTimeout(this.timer)
},
methods: {
// 地图初始化
baseData() {
this.init()
window.initMap_line()
this.timer = setTimeout(() => {
this.doorAddressInit()
this.initMapUi()
if (this.isUsePath) {
this.ployLine()
this.stopPoint()
}
}, 500)
},
// 地图相关控件、插件
init() {
let that = this
this.map = undefined
if (!window.initMap_line) {
var script = document.createElement('script')
script.type = 'text/javascript'
script.src =
'//webapi.amap.com/maps?v=1.4.2&key=47be8e6664c78cfdbc3a8172cbcb1106&callback=initMap_line'
}
// 点击信息窗的使用经纬度
window.sureLngLat = (e, lon, lat, num) => {
console.log(e, lon, lat)
this.setCircle(lon, lat, 200)
if (num == 0) {
this.doorInfoWindow.close()
} else {
this.cilckDoorInfoWindow.close()
}
this.$emit('freshlnglat', { lon: lon, lat: lat, isFirst: false })
}
// 点击信息窗使用该位置（点击红色停车点、起点终点的使用该位置）
window.sureAdd = (e, lon, lat) => {
console.log(e, lon, lat)
this.setCircle(lon, lat, 200)
this.doorInfoWindow.close()
this.$emit('freshadd', e.regeocode.formattedAddress)
}
// 点击信息窗的使用该位置（点击蓝色标记的弹出的信息窗（门点，搜索框，坐标拾取））
window.sureAddOnly = (e, lon, lat, num) => {
console.log(e, lon, lat)
this.setCircle(lon, lat, 200)
this.cilckDoorInfoWindow.close()
if (num == 0) {
this.$emit('freshadd', e.regeocode.formattedAddress)
} else if (num == 1) {
this.$emit('freshadd', e.geocodes[0].formattedAddress)
} else if (num == 2) {
this.$emit('freshadd', {
name: e.name,
address: e.district ? e.district + e.address : e.address,
})
}
}
//初始化地图
window.initMap_line = function () {
that.map = new AMap.Map(that.mapName, {
doubleClickZoom: false,
resizeEnable: true,
center: [116.397428, 39.90923],
zoom: 10,
})
that.map.plugin(
[
'AMap.ToolBar',
'AMap.Scale',
'AMap.Driving',
'AMap.Geocoder',
'AMap.PlaceSearch',
'AMap.Marker',
'AMap.Icon',
'AMap.Size',
'AMap.Pixel',
'AMap.AdvancedInfoWindow',
],
function () {
that.map.addControl(new AMap.ToolBar({ position: 'RT' }))
that.map.addControl(new AMap.Scale())
that.map.addControl(new AMap.Marker())
}
)
// 点击地图（坐标拾取）
that.map.on('click', (e) => {
console.log(e.lnglat.getLng(), e.lnglat.getLat())
that.clickPoint(e.lnglat.getLng(), e.lnglat.getLat())
})
}
},
// 加载地图poi搜索的ui，不这样加会报错，AMapUI is undefined
initMapUi() {
let that = this
if (typeof AMapUI == 'undefined') {
$.getScript('https://webapi.amap.com/ui/1.0/main.js?v=1.0.11').done(
function (script, text) {
if (text == 'success' && typeof AMapUI != 'undefined') {
AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) {
var poiPicker = new PoiPicker({
input: that.mapinputId, //输入框id
})
console.log(poiPicker, that.doorAddress)
$(`#${that.mapinputId}`).val(that.doorAddress)
//监听poi选中信息
poiPicker.on('poiPicked', function (poiResult) {
//用户选中的poi点信息
console.log(poiResult)
that.inputData = poiResult.item
$(`#${that.mapinputId}`).val(poiResult.item.name)
let address = that.inputData.district
? that.inputData.district + that.inputData.address
: that.inputData.address
that.inputAddressInit(
that.inputData,
that.inputData.name,
address,
that.inputData.location.lng,
that.inputData.location.lat
)
})
poiPicker.onCityReady(function () {
poiPicker.suggest(that.doorAddress)
})
})
}
}
)
} else {
AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) {
var poiPicker = new PoiPicker({
input: that.mapinputId, //输入框id
})
console.log(poiPicker, that.doorAddress)
$(`#${that.mapinputId}`).val(that.doorAddress)
//监听poi选中信息
poiPicker.on('poiPicked', function (poiResult) {
//用户选中的poi点信息
console.log(poiResult)
that.inputData = poiResult.item
$(`#${that.mapinputId}`).val(poiResult.item.name)
let address = that.inputData.district
? that.inputData.district + that.inputData.address
: that.inputData.address
that.inputAddressInit(
that.inputData,
that.inputData.name,
address,
that.inputData.location.lng,
that.inputData.location.lat
)
})
poiPicker.onCityReady(function () {
poiPicker.suggest(that.doorAddress)
})
})
}
},
// 绘制轨迹
ployLine() {
let that = this
if (that.pathList.length !== 0) {
this.trackList = that.pathList
// 信息窗
this.doorInfoWindow = new AMap.InfoWindow({})
function clickMarker(e) {
that.doorInfoWindow.setContent(e.target.content)
that.doorInfoWindow.open(that.map, e.target.getPosition())
}
// 轨迹
this.path = new AMap.Polyline({
path: null,
isOutline: false, //线条是否带描边，默认false
outlineColor: '#ffeeff', //线条描边颜色，此项仅在isOutline为true时有效，默认：#000000
borderWeight: 5, //描边的宽度，默认为1
strokeColor: '#477694', //线条颜色，使用16进制颜色代码赋值。默认值为#006600
strokeOpacity: 1, //线条透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
strokeWeight: 8, //线条宽度，单位：像素
// 折线样式还支持 'dashed'
strokeStyle: 'solid', //线样式，实线:solid，虚线:dashed
// strokeStyle是dashed时有效
strokeDasharray: [10, 5], //勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效
lineJoin: 'miter', //折线拐点的绘制样式，默认值为'miter'尖角，其他可选值：'round'圆角、'bevel'斜角
lineCap: 'round', //折线两端线帽的绘制样式，默认值为'butt'无头，其他可选值：'round'圆头、'square'方头
zIndex: 50, //折线覆盖物的叠加顺序。默认叠加顺序，先添加的线在底层，后添加的线在上层。通过该属性可调整叠加顺序，使级别较高的折线覆盖物在上层显示默认zIndex：50、
})
// 将折线添加至地图实例
console.log(this.map, this.map.add)
this.map.add(this.path)
// 起点
this.markerStart = new AMap.Marker({
position: null,
icon: new AMap.Icon({
size: new AMap.Size(30, 31),
image: '../images/OpenLayers/begin.png',
}),
})
// 终点
this.markerEnd = new AMap.Marker({
position: null,
icon: new AMap.Icon({
size: new AMap.Size(30, 31),
image: '../images/OpenLayers/end.png',
}),
})
let trackPath = []
this.trackList.forEach((item, index) => {
trackPath.push(new AMap.LngLat(item.lon, item.lat))
})
this.path.setPath(trackPath)
this.path.show()
let startTrack = new AMap.LngLat(
this.trackList[0].lon,
this.trackList[0].lat
)
this.markerStart.setPosition(startTrack)
this.markerStart.show()
let endTrack = new AMap.LngLat(
this.trackList[this.trackList.length - 1].lon,
this.trackList[this.trackList.length - 1].lat
)
this.map.setZoomAndCenter(10, endTrack)
this.markerEnd.setPosition(endTrack)
this.markerEnd.show()
// 起点与终点的信息窗
AMap.service('AMap.Geocoder', function () {
var geocoder = new AMap.Geocoder({})
geocoder.getAddress(startTrack, function (status, result) {
that.markerStart.content =
"<div style='font-size:14px'>地址: " +
result.regeocode.formattedAddress +
'</div>' +
"<div style='font-size:14px'>经纬度: " +
that.trackList[0].lon +
',' +
that.trackList[0].lat +
'</div>' +
"<div style='text-align:right;margin-top:10px'>" +
"<button type='button' class='btn btn-primary btn-close point-btn btn-add' οnclick=sureLngLat(" +
JSON.stringify(result) +
',' +
that.trackList[0].lon +
',' +
that.trackList[0].lat +
0 +
')>使用此经纬度</button>' +
"<button type='button' class='btn btn-primary btn-close point-btn btn-add' οnclick=sureadd(" +
JSON.stringify(result) +
',' +
that.trackList[0].lon +
',' +
that.trackList[0].lat +
')>使用此地址文本</button>' +
'</div>'
that.markerStart.on('click', clickMarker)
that.map.add([that.markerStart])
})
})
AMap.service('AMap.Geocoder', function () {
var geocoder = new AMap.Geocoder({})
geocoder.getAddress(endTrack, function (status, result) {
that.markerEnd.content =
"<div style='font-size:14px'>地址: " +
result.regeocode.formattedAddress +
'</div>' +
"<div style='font-size:14px'>经纬度: " +
that.trackList[that.trackList.length - 1].lon +
',' +
that.trackList[that.trackList.length - 1].lat +
"<div style='text-align:right;margin-top:10px'>" +
"<button type='button' class='btn btn-primary btn-close point-btn btn-add' οnclick=sureLngLat(" +
JSON.stringify(result) +
',' +
that.trackList[that.trackList.length - 1].lon +
',' +
that.trackList[that.trackList.length - 1].lat +
+','
0 +
')>使用此经纬度</button>' +
"<button type='button' class='btn btn-primary btn-close point-btn btn-add' οnclick=sureAdd(" +
JSON.stringify(result) +
',' +
that.trackList[that.trackList.length - 1].lon +
',' +
that.trackList[that.trackList.length - 1].lat +
')>使用此地址文本</button>' +
'</div>'
that.markerEnd.on('click', clickMarker)
})
that.map.add([that.markerEnd])
})
} else {
_.ui.notify({
message: '暂无轨迹信息',
type: 'warning',
})
}
this.stopPoint()
},
// 绘制停车点
stopPoint() {
let that = this
// 停车点的信息窗
that.doorInfoWindow = new AMap.InfoWindow({})
function clickMarker(e) {
that.doorInfoWindow.setContent(e.target.content)
that.doorInfoWindow.open(that.map, e.target.getPosition())
}
if (that.stops.length !== 0) {
this.stopList = that.stops
this.stopList.forEach((e, i) => {
// 停车时间大于15分钟
if (e.duration >= 900) {
AMap.service('AMap.Geocoder', function () {
let geocoder = new AMap.Geocoder({})
let point = new AMap.LngLat(e.lon, e.lat)
geocoder.getAddress(point, function (status, result) {
console.log(result)
let doorMarker = new AMap.Marker({
position: [that.stopList[i].lon, that.stopList[i].lat],
icon: new AMap.Icon({
size: new AMap.Size(19, 31),
image: '../images/OpenLayers/marker_red_point.png',
}),
})
// 停车点信息窗
doorMarker.content =
"<div style='font-size:14px'>停留时长: " +
that.computedSecond(e.duration) +
"<div style='font-size:14px'>地址: " +
result.regeocode.formattedAddress +
'</div>' +
"<div style='font-size:14px'>经纬度: " +
that.stopList[i].lon +
',' +
that.stopList[i].lat +
'</div>' +
"<div style='text-align:right;margin-top:10px'>" +
"<button type='button' class='btn btn-primary btn-close point-btn btn-add' οnclick=sureLngLat(" +
JSON.stringify(result) +
',' +
that.stopList[i].lon +
',' +
that.stopList[i].lat +
',' +
0 +
')>使用此经纬度</button>' +
"<button type='button' class='btn btn-primary btn-close point-btn btn-add' οnclick=sureAdd(" +
JSON.stringify(result) +
',' +
that.stopList[i].lon +
',' +
that.stopList[i].lat +
',' +
')>使用此地址文本</button>' +
'</div>'
doorMarker.on('click', clickMarker)
that.map.add([doorMarker])
})
})
}
})
}
},
// 当前门点地址
doorAddressInit() {
let that = this
if (that.clickMaker) {
that.map.remove(that.clickMaker)
that.clickMaker.setMap(null)
that.clickMaker = null
that.cilckDoorInfoWindow.close()
}
this.$nextTick(() => {
AMap.service('AMap.Geocoder', function () {
let geocoder = new AMap.Geocoder({})
geocoder.getLocation(that.doorAddress, function (status, result) {
console.log(result, 'result', status)
if (Object.keys(result).length == 0) {
_.ui.notify({
type: 'warning',
message: '请按照省市区划逐级填写详细地址',
})
return
}
if (status == 'complete') {
let portPoint = {
latitude: result.geocodes[0].location.lat,
longitude: result.geocodes[0].location.lng,
}
// 门点的标记
that.clickMaker = new AMap.Marker({
position: [portPoint.longitude, portPoint.latitude],
icon: new AMap.Icon({
size: new AMap.Size(19, 31),
image: '//webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
}),
zIndex: 111,
})
// 将更改的标记添加到地图上
that.map.add([that.clickMaker])
// 初始化一个门点信息窗
that.cilckDoorInfoWindow = new AMap.InfoWindow({
content:
"<div style='font-size:14px'>地址: " +
result.geocodes[0].formattedAddress +
'</div>' +
"<div style='font-size:14px'>经纬度: " +
portPoint.longitude +
',' +
portPoint.latitude +
'</div>' +
"<div style='text-align:right;margin-top:10px'>" +
"<button type='button' class='btn btn-primary btn-close point-btn btn-add' οnclick=sureLngLat(" +
JSON.stringify(result) +
',' +
portPoint.longitude +
',' +
portPoint.latitude +
',' +
1 +
')>使用此经纬度</button>' +
"<button type='button' class='btn btn-primary btn-close point-btn btn-add' οnclick=sureAddOnly(" +
JSON.stringify(result) +
',' +
portPoint.longitude +
',' +
portPoint.latitude +
',' +
1 +
')>使用此地址文本</button>' +
'</div>',
/* "<button type='button' class='btn btn-primary btn-close btn-add' οnclick=sureAddressLonLat(" +
JSON.stringify(result) +
',' +
portPoint.longitude +
',' +
portPoint.latitude +
',' +
1 +
')>使用此地址与经纬度</button>'+ '</div>'*/
})
that.map.setZoomAndCenter(
11,
new AMap.LngLat(portPoint.longitude, portPoint.latitude)
)
// 初始化的时候打开信息窗
that.cilckDoorInfoWindow.open(that.map, [
portPoint.longitude,
portPoint.latitude,
])
// 点击标记的时候还能打开信息窗
that.clickMaker.on('click', (e) => {
that.cilckDoorInfoWindow.open(that.map, [
portPoint.longitude,
portPoint.latitude,
])
})
that.$emit('freshlnglat', {
lon: portPoint.longitude,
lat: portPoint.latitude,
isFirst: true,
})
}
})
})
})
},
// 点击地图获取经纬度与地址
clickPoint(lon, lat) {
let that = this
if (that.clickMaker) {
that.map.remove(that.clickMaker)
that.clickMaker.setMap(null)
that.clickMaker = null
that.cilckDoorInfoWindow.close()
}
AMap.service('AMap.Geocoder', function () {
let geocoder = new AMap.Geocoder({})
let point = new AMap.LngLat(lon, lat)
geocoder.getAddress(point, function (status, result) {
console.log(result)
let portPoint = {
latitude: lat,
longitude: lon,
}
// 点击地图某位置生成的标记
that.clickMaker = new AMap.Marker({
position: [portPoint.longitude, portPoint.latitude],
icon: new AMap.Icon({
size: new AMap.Size(19, 31),
image: '//webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
}),
zIndex: 111,
})
// 将更改的标记添加到地图上
that.map.add([that.clickMaker])
// 初始化一个点击的标记的信息窗
that.cilckDoorInfoWindow = new AMap.InfoWindow({
content:
"<div style='font-size:14px'>地址: " +
result.regeocode.formattedAddress +
'</div>' +
"<div style='font-size:14px'>经纬度: " +
portPoint.longitude +
',' +
portPoint.latitude +
'</div>' +
"<div style='text-align:right;margin-top:10px'>" +
"<button type='button' class='btn btn-primary btn-close point-btn btn-add' οnclick=sureLngLat(" +
JSON.stringify(result) +
',' +
portPoint.longitude +
',' +
portPoint.latitude +
',' +
1 +
')>使用此经纬度</button>' +
"<button type='button' class='btn btn-primary btn-close point-btn btn-add' οnclick=sureAddOnly(" +
JSON.stringify(result) +
',' +
portPoint.longitude +
',' +
portPoint.latitude +
',' +
0 +
')>使用此地址文本</button>' +
'</div>',
/* "<button type='button' class='btn btn-primary btn-close btn-add' οnclick=sureAddressLonLat(" +
JSON.stringify(result) +
',' +
portPoint.longitude +
',' +
portPoint.latitude +
',' +
0 +
')>使用此地址与经纬度</button>' +'</div>'*/
})
// 初始化的时候打开信息窗
that.cilckDoorInfoWindow.open(that.map, [
portPoint.longitude,
portPoint.latitude,
])
// 点击标记的时候还能打开信息窗
that.clickMaker.on('click', (e) => {
that.cilckDoorInfoWindow.open(that.map, [
portPoint.longitude,
portPoint.latitude,
])
})
})
})
},
// 停车时间换算
computedSecond(secondTime) {
let min, second, h
min = parseInt(secondTime / 60) //获取分钟，除以60取整数，得到整数分钟
second = parseInt(secondTime % 60) //获取秒数，秒数取佘，得到整数秒数
if (min > 60) {
//如果分钟大于60，将分钟转换成小时
h = parseInt(min / 60) //获取小时，获取分钟除以60，得到整数小时
min = parseInt(min % 60) //获取小时后取佘的分，获取分钟除以60取佘的分
}
return (
(h > 0 ? h + '小时' : '') +
(min > 0 ? min + '分钟' : '') +
(second > 0 ? second + '秒' : '')
)
},
// 点击使用该位置后构造的圆
setCircle(lon, lat, radius) {
let that = this
that.map.remove(that.doorCircle)
that.map.remove(that.lnglatMaker)
that.lnglatMaker = new AMap.Marker({
position: [lon, lat],
icon: new AMap.Icon({
image: '../../images/map-pin.png',
offset: new AMap.Pixel(20, 0),
imageSize: new AMap.Size(34, 34),
}),
zIndex: 110,
})
// 构造矢量圆形
that.doorCircle = new AMap.Circle({
center: new AMap.LngLat(lon, lat), // 圆心位置
radius: radius, //半径
strokeColor: '#409eff', //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 1, //线粗细度
fillColor: '#409eff', //填充颜色
fillOpacity: 0.35, //填充透明度
zIndex: 100,
})
that.map.add([that.lnglatMaker, that.doorCircle])
this.map.setZoomAndCenter(15, new AMap.LngLat(lon, lat))
},
// 模糊搜索选中
inputAddressInit(obj, name, address, lng, lat) {
let that = this
if (that.clickMaker) {
that.map.remove(that.clickMaker)
that.clickMaker.setMap(null)
that.clickMaker = null
that.cilckDoorInfoWindow.close()
}
let portPoint = {
latitude: lat,
longitude: lng,
}
that.clickMaker = new AMap.Marker({
position: [portPoint.longitude, portPoint.latitude],
icon: new AMap.Icon({
size: new AMap.Size(19, 31),
image: '//webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
}),
zIndex: 111,
})
// 将更改的标记添加到地图上
that.map.add([that.clickMaker])
// 初始化一个信息窗
that.cilckDoorInfoWindow = new AMap.InfoWindow({
content:
"<div style='font-size:14px'>名称: " +
name +
'</div>' +
"<div style='font-size:14px'>地址: " +
address +
'</div>' +
"<div style='font-size:14px'>经纬度: " +
portPoint.longitude +
',' +
portPoint.latitude +
'</div>' +
"<div style='text-align:right;margin-top:10px'>" +
"<button type='button' class='btn btn-primary btn-close point-btn btn-add' οnclick=sureLngLat(" +
JSON.stringify(obj) +
',' +
portPoint.longitude +
',' +
portPoint.latitude +
',' +
1 +
')>使用此经纬度</button>' +
"<button type='button' class='btn btn-primary btn-close point-btn btn-add' οnclick=sureAddOnly(" +
JSON.stringify(obj) +
',' +
portPoint.longitude +
',' +
portPoint.latitude +
',' +
2 +
')>使用此地址文本</button>' +
'</div>',
/* "<button type='button' class='btn btn-primary btn-close btn-add' οnclick=sureAddressLonLat(" +
JSON.stringify(result) +
',' +
portPoint.longitude +
',' +
portPoint.latitude +
',' +
1 +
')>使用此地址与经纬度</button>'+ '</div>'*/
})
that.map.setZoomAndCenter(
11,
new AMap.LngLat(portPoint.longitude, portPoint.latitude)
)
// 初始化的时候打开信息窗
that.cilckDoorInfoWindow.open(that.map, [
portPoint.longitude,
portPoint.latitude,
])
// 点击标记的时候还能打开信息窗
that.clickMaker.on('click', (e) => {
that.cilckDoorInfoWindow.open(that.map, [
portPoint.longitude,
portPoint.latitude,
])
})
},
},
}
</script>
<style>
#ploygon .baseBox {
background-color: #fefefe;
border: 1px solid #bfd6e1;
border-radius: 5px;
color: #444;
font: 14px 'Microsoft YaHei', '���ź�';
margin: 0 auto;
width: 300px;
top: 10px;
z-index: 9000;
overflow: hidden;
}
#ploygon .baseBox .baseBoxTitle {
border-bottom: 1px solid #dde0e8;
text-align: center;
line-height: 30px;
}
#ploygon .baseBox .baseBoxCenter {
border-bottom: 1px solid #dde0e8;
padding: 0px 24px 2px 24px;
}
#ploygon .baseBox .baseBoxCenter p {
margin-bottom: 10px;
}
#ploygon .baseBox .baseBoxButtons {
background-color: #f0f4f6;
border-top: 1px solid #fff;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
line-height: 20px;
overflow: hidden;
padding: 5px 24px;
}
#ploygon .baseBox .baseInput {
border: 1px solid #d2d9dc;
border-radius: 2px;
color: #444;
font: 14px;
padding: 5px;
margin-bottom: 8px;
width: 90%;
}
#ploygon .baseBox .baseInput:focus {
border: 1px solid #b7d4ea;
box-shadow: 0 0 8px #b7d4ea;
}
#ploygon .baseBox .baseBtn {
background-image: -moz-linear-gradient(to bottom, #b5def2, #85cfee);
border: 1px solid #98cce7;
border-radius: 20px;
box-shadow: inset rgba(255, 255, 255, 0.6) 0 1px 1px,
rgba(0, 0, 0, 0.1) 0 1px 1px;
color: #111;
cursor: pointer;
float: right;
font: bold 12px 'Microsoft YaHei', '���ź�';
padding: 5px 14px;
}
#ploygon .baseBox .baseBtn:hover {
background-image: -moz-linear-gradient(to top, #b5def2, #85cfee);
}
#ploygon .baseBox a.forgetLink {
color: #ababab;
cursor: pointer;
float: right;
font: 11px/20px Arial;
text-decoration: none;
vertical-align: middle;
}
#ploygon .baseBox a.forgetLink:hover {
text-decoration: underline;
}
#ploygon .baseBox input#remember {
vertical-align: middle;
}
#ploygon .baseBox label[for='remember'] {
font: 11px Arial;
}
#ploygon .baseBox .baseCheckbox {
margin-bottom: 8px;
}
#ploygon .map {
width: 100%;
position: relative;
height: 100%;
padding: 0px;
}
#ploygon #navigation {
position: absolute;
bottom: 70px;
left: 10px;
z-index: 1000;
}
#ploygon #loadingDiv {
position: absolute;
z-index: 9001;
background-color: #bfd6e1;
opacity: 0.8;
display: none;
}
#ploygon .ajax-loader {
cursor: wait;
background: #ffffff;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
filter: alpha(opacity=75);
opacity: 0.75;
position: absolute;
}
#ploygon div.olControlZoom {
position: absolute;
top: 8px;
left: 8px;
background: rgba(255, 255, 255, 0.4);
border-radius: 4px;
padding: 2px;
}
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#ploygon div.olControlZoom a {
display: block;
margin: 1px;
padding: 0;
color: white;
font-size: 28px;
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
text-align: center;
height: 32px;
width: 32px;
line-height: 28px;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
background: #130085;
/* fallback for IE - IE6 requires background shorthand*/
background: rgba(0, 60, 136, 0.5);
filter: alpha(opacity=80);
}
#ploygon a.olControlZoomIn {
border-radius: 4px 4px 0 0;
}
#ploygon a.olControlZoomOut {
border-radius: 0 0 4px 4px;
}
#ploygon div.olControlZoom a:hover {
background: #130085;
/* fallback for IE */
background: rgba(0, 60, 136, 0.7);
filter: alpha(opacity=100);
}
@media only screen and (max-width: 600px) {
div.olControlZoom a:hover {
background: rgba(0, 60, 136, 0.5);
}
}
#ploygon div.olMapViewport {
-ms-touch-action: none;
}
#ploygon .olLayerGrid .olTileImage {
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
/* Turn on GPU support where available */
#ploygon .olTileImage {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
}
#ploygon #div_map {
display: flex;
flex: 1;
justify-content: center;
align-items: center;
font-size: 20px;
min-height: 150px;
}
#ploygon #msgDiv {
position: absolute;
top: 70px;
left: 60px;
}
#ploygon .input-group.btn-form {
float: left;
}
#ploygon .boxTimeRadioList .input-container .form-control {
width: 100px;
margin-right: 5px;
}
#ploygon .boxTimeRadioList .input-container span {
float: left;
margin: 4px 0 0 -5px;
}
.point-btn {
margin-right: 10px;
}
.btn-add {
padding: 0 !important;
font-size: 10px !important;
}
#ploygon .map-input ::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: #ababab;
letter-spacing: 2px;
}
#ploygon .map-input :-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #ababab;
letter-spacing: 2px;
}
#ploygon .map-input ::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #ababab;
letter-spacing: 2px;
}
#ploygon .map-input :-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #ababab;
letter-spacing: 2px;
}
#ploygon .dock-bottom {
max-height: 300px !important;
top: 35px !important;
overflow-y: auto;
}
</style>
使用的时候，在父组件中通过ref调用baseData()方法。
3704
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
