Bing Maps V8 Web Control - Bing Maps | Microsoft Learn
import React, { Component } from 'react'
import './map.css'
import { Select, Checkbox, message, Spin, Tooltip } from 'antd';
import intl from 'react-intl-universal';
import { getToken, getRefreshToken } from '../../utils/auths.js'
import { getRegion, getProductImg, getDistrict } from '../../api/map.js'
import { getDeviceInteraction } from '../../api/myproduct.js'
export default class Index extends Component {
constructor(props) {
super(props)
this.state = {
vector: require('../../assest/shelf/Down.png'),
backIMg: require('../../assest/monitor/backmapIcon.png'),
backIMgDis: require('../../assest/monitor/backmapicondis.png'),
mores: require('../../assest/monitor/moresNew.png'),
moresDown: require('../../assest/monitor/laDown.png'),
laup: require('../../assest/monitor/laup.png'),
locateMe: require('../../assest/monitor/Vector.png'),
addSetView: require('../../assest/monitor/add.png'),
reduSetView: require('../../assest/monitor/reduce.png'),
disAddSetView: require('../../assest/shelf/disadd.png'),
disReduSetView: require('../../assest/shelf/disreduce.png'),
showUp: true,
selectDown: true,
deviceList: [
{
id: 0,
productImg: require('../../assest/shelf/testimg.png'),
total: 50,
},
{
id: 1,
productImg: require('../../assest/shelf/testimg.png'),
total: 100,
},
{
id: 2,
productImg: require('../../assest/shelf/testimg.png'),
total: 100,
},
],
productImgList: [],
productListsNew: [],
productList: [],
productList2:
{
id: 0,
productName: '上海市浦东新区施华蔻专业沙龙',
productImg: require('../../assest/shelf/testimg.png'),
total: 100,
online: 99,
offline: 5
},
productList3:
{
id: 0,
productName: '上海市浦东新区施华蔻专业沙龙',
productImg: require('../../assest/shelf/sheftoffline.png'),
total: 100,
online: 99,
offline: 5
},
localPostion: '',
map: null,
searchManager: null,
noData: false,
areaCollectList: null,
deviceIdSet: null,
country: null,
province: null,
city: null,
district: null,
areaNameTime: false,
infobox: null,
locationArr: [],
oldAreaCollectList: [],
oldAreaArr: [],
monitorCenterModelList: [],
searchManagerArr: null,
zoomLevels: null,
add: false,
reduce: false,
arrsPlaces: [],
polyArr: [],
backTrue: false,
closeMores: false,
spinLoad: true,
addDis: false,
reduceDis: false,
choosLocation: null,
isOne: false,
isOneNew: false,
countryOptions: [
{
label: intl.get('domesticCountry'),
options: [
{
label: intl.get('china'),
value: '中国',
},
{
label: intl.get('germany'),
value: 'Germany',
},
{
label: intl.get('azerbaijan'),
value: 'Azerbaijan',
},
{
label: intl.get('belgium'),
value: 'Belgium',
},
{
label: intl.get('france'),
value: 'France',
},
{
label: intl.get('japan'),
value: 'Japan',
},
{
label: intl.get('netherlands'),
value: 'Netherlands',
},
{
label: intl.get('spain'),
value: 'Spain',
},
{
label: intl.get('greatBritain'),
value: 'United Kingdom',
},
{
label: intl.get('switzerland'),
value: 'Switzerland',
},
{
label: intl.get('finland'),
value: 'Finland',
},
{
label: intl.get('italy'),
value: 'Italy',
},
{
label: intl.get('portugal'),
value: 'Portugal',
},
{
label: intl.get('poland'),
value: 'Poland',
},
{
label: intl.get('greece'),
value: 'Greece',
},
{
label: intl.get('croatia'),
value: 'Croatia',
},
{
label: intl.get('hungary'),
value: 'Hungary',
},
{
label: intl.get('unitedArabEmirates'),
value: 'United Arab Emirates',
},
{
label: intl.get('czechRepublic'),
value: 'Czech Republic',
},
{
label: intl.get('unitedStates'),
value: 'United States',
}
],
}
],
zoomsGetNew: null,
locale: localStorage.getItem('locale') || localStorage.getItem("defaultLng") || 'zh',
}
}
componentDidMount() {
this.getProductImg()
window.getMaps = () => {
this.getMapsShow()
}
let newLang = sessionStorage.getItem('newLang')
let script = document.createElement("script");
let local = localStorage.getItem('locale') || localStorage.getItem("defaultLng") || 'zh'
let localLang = null
if (newLang) {
localLang = newLang
} else {
localLang = local === 'zh' ? 'zh-CN' : "en-US"
}
script.type = "text/javascript"
script.async = true;
script.src = `https://www.bing.com/api/maps/mapcontrol?callback=getMaps&setLang=${localLang}&setMkt=${localLang}&key=AubFb7RYSyP_otlj3FS-rBm6n2Fg6dDtfPaTqgyz-ZkEDEEqtfW1wYITC-99J3t0`
document.body.appendChild(script);
}
getMapsShow = () => {
let Microsoft = global.Microsoft
let map = new Microsoft.Maps.Map('#myMap', {
showMapTypeSelector: false,
showScalebar: false,
showTermsLink: false,
zoom: 3,
minZoom: 3,
maxZoom: 15,
disableScrollWheelZoom: true,
showDashboard: false,
showLocateMeButton: false
});
this.setState({
map: map,
spinLoad: false
}, () => {
let langsValue = sessionStorage.getItem('langsValue')
if (langsValue) {
this.setState({
areaNameTime: false,
choosLocation: langsValue
}, () => {
sessionStorage.removeItem('langsValue')
sessionStorage.setItem('searchType', 'country')
this.search(langsValue)
})
}
})
this.addHanderMap(map, Microsoft)
}
addHanderMap = (map, Microsoft) => {
const isInteger = (obj) => {
return obj % 1 === 0
}
Microsoft.Maps.Events.addHandler(map, 'viewchangeend', (e) => {
let zoomLevel = map.getZoom()
let country = this.state.country
let zoomCharge = isInteger(zoomLevel)
this.addHanderZoom(country, zoomCharge, zoomLevel, map)
if (map.getZoom() === map.getZoomRange().max) {
this.setState({
addDis: true
})
} else {
this.setState({
addDis: false
})
}
if (map.getZoom() === map.getZoomRange().min) {
this.setState({
reduceDis: true
})
} else {
this.setState({
reduceDis: false
})
}
if (this.state.country) {
if (this.state.country === '中国' && zoomLevel < 8 || (this.state.country != '中国' && zoomLevel < 9)) {
this.setState({
backTrue: false
})
} else {
this.setState({
backTrue: true
})
}
} else {
this.setState({
backTrue: false
})
}
console.log(zoomLevel, map.getZoomRange())
});
}
addHanderZoom = (country, zoomCharge, zoomLevel, map) => {
if (country) {
if (country === '中国' && zoomCharge) {
if (zoomLevel === 5) {
map.setOptions({
minZoom: 5,
maxZoom: 7
})
} else if (zoomLevel === 8) {
map.setOptions({
minZoom: 8,
maxZoom: 9,
})
} else if (zoomLevel === 10) {
map.setOptions({
minZoom: 10,
maxZoom: 12,
})
} else if (zoomLevel === 13) {
map.setOptions({
minZoom: 13
})
}
} else if (country != '中国' && zoomCharge) {
if (zoomLevel >= 4 && zoomLevel <= 8) {
map.setOptions({
minZoom: 4,
maxZoom: 8
})
} else if (zoomLevel === 9) {
map.setOptions({
minZoom: 9
})
}
}
}
}
getProductImg = () => {
let productImgList = JSON.parse(sessionStorage.getItem('monitorProductImgList'))
if (productImgList) {
this.setState({
productImgList: productImgList
})
} else {
getProductImg().then(res => {
console.log('getProductImg', res)
let data = res.responseData
this.setState({
productImgList: data
}, () => {
sessionStorage.setItem('monitorProductImgList', JSON.stringify(data))
})
})
}
}
getRegion = (address) => {
this.setState({
spinLoad: true,
})
let mapSvo = {}
mapSvo.country = address.country
mapSvo.province = address.province
mapSvo.city = address.city
mapSvo.district = address.district
mapSvo.deviceIdSet = address.deviceIdSet
getRegion(mapSvo).then(res => {
let data = res.responseData
this.setState({
showUp: true,
areaNameTime: false,
spinLoad: false,
productList: data.productCollects,
areaCollectList: data.areaCollectList,
deviceIdSet: data.deviceIdSet
}, () => {
this.setProductList()
})
}).catch(err => {
this.setState({
spinLoad: false
})
})
}
getDistrict = (address) => {
this.setState({
spinLoad: true,
})
let mapSvo = {}
mapSvo.country = address.country
mapSvo.province = address.province
mapSvo.city = address.city
mapSvo.district = address.district
mapSvo.deviceIdSet = address.deviceIdSet
getDistrict(mapSvo).then(res => {
let data = res.responseData
this.setState({
showUp: true,
spinLoad: false,
areaNameTime: false,
productList: data.productCollects,
monitorCenterModelList: data.monitorCenterModelList
}, () => {
if (this.state.isOne && (!this.state.isOneNew)) {
this.setState({
areaNameTime: true,
isOneNew: true
}, () => {
if (this.state.country === '中国') {
this.search(this.state.country + this.state.province + this.state.city + this.state.district + this.state.monitorCenterModelList[0].deviceAddress)
} else {
this.search(this.state.monitorCenterModelList[0].deviceAddress + ' ' + this.state.province + ' ' + this.state.country)
}
})
}
})
}).catch(err => {
this.setState({
spinLoad: false
})
})
}
setProductList = () => {
if (this.state.productList && this.state.productList.length > 0) {
let newProductList = []
this.state.productList.map(item => {
let value = item
value.checked = true
newProductList.push(value)
})
this.setState({
productListsNew: newProductList,
selectDown: true
}, () => {
let mapZoom = this.state.map.getZoom()
if (this.state.country === '中国' && mapZoom >= 13 || (this.state.country != '中国' && mapZoom >= 9)) {
this.setDistrictInfo()
} else {
this.setMapProvence()
}
})
} else {
this.setState({
productListsNew: this.state.productList,
noData: true
})
}
}
setDistrictInfo = () => {
this.setState({
spinLoad: true
})
let checkedArr = []//选中的产品id
this.state.productListsNew.map(item => {
if (item.checked) {
checkedArr.push(item.productId)
}
})
let arrDeviceAddress = []
let arrsProductArr = []
this.state.monitorCenterModelList.map(item => {
this.setState({
areaNameTime: true
}, () => {
this.state.locationArr.map(iteminfo => {
iteminfo.setMap();
})
if (checkedArr.indexOf(item.productId) >= 0) {
let arrAddIMg = item
arrAddIMg.productImg = this.getProductInfos(item.productId).productImgs
if (item.deviceAddress) {
this.searchItem(item, arrDeviceAddress, arrsProductArr, arrAddIMg)
} else {
message.error(intl.get('addressNo'))
}
} else {
this.setState({
spinLoad: false
})
}
})
})
}
searchItem = (item, arrDeviceAddress, arrsProductArr, arrAddIMg) => {
let mainProducts = {}
let productArr = []
if (arrDeviceAddress.indexOf(item.deviceAddress) < 0) {
arrDeviceAddress.push(item.deviceAddress)
mainProducts.deviceAddress = item.deviceAddress
productArr.push(arrAddIMg)
mainProducts.productArr = productArr
arrsProductArr.push(mainProducts)
if (this.state.country == '中国') {
this.search(this.state.country + this.state.province + this.state.city + this.state.district + item.deviceAddress, productArr, item.deviceAddress)
} else {
this.search(item.deviceAddress + ' ' + this.state.province + ' ' + this.state.country, productArr, item.deviceAddress)
}
} else {
arrsProductArr.map(itemMain => {
if (itemMain.deviceAddress === item.deviceAddress) {
itemMain.productArr.push(arrAddIMg)
}
})
}
}
setMapProvence = () => {
this.setState({
spinLoad: true
})
let checkedArr = []//选中的产品id
this.state.productListsNew.map(item => {
if (item.checked) {
checkedArr.push(item.productId)
}
})
this.state.areaCollectList.map(item => {
this.setState({
areaNameTime: true
}, () => {
let arrProducts = []
item.productCollects.map(items => {
if (checkedArr.indexOf(items.productId) >= 0) {
let arrAddIMg = items
arrAddIMg.productImg = this.getProductInfos(items.productId).productImgs
arrProducts.push(arrAddIMg)
}
})
this.state.locationArr.map(iteminfo => {
iteminfo.setMap();
})
if (arrProducts.length > 0) {
this.toSearch(item, arrProducts)
} else {
this.setState({
spinLoad: false
})
}
}
)
})
}
toSearch = (item, arrProducts) => {
let map = this.state.map
if (map.getZoom() < 8 && this.state.country == '中国' || (map.getZoom() < 9 && this.state.country != '中国')) {
if (this.state.country == '中国') {
this.search(this.state.country + item.areaName, arrProducts, item.areaName)
} else {
this.search(item.areaName + ' ' + this.state.country, arrProducts, item.areaName)
}
} else if (map.getZoom() === 8 && this.state.country == '中国' || (map.getZoom() === 9 && this.state.country != '中国')) {
this.search(this.state.country + this.state.province + item.areaName, arrProducts, item.areaName)
} else if (map.getZoom() === 10) {
this.search(this.state.country + this.state.province + this.state.city + item.areaName, arrProducts, item.areaName)
}
}
getProductInfos = (id) => {
let value = {}
this.state.productImgList.map(item => {
if (item.pkId === id) {
value.productImgs = item.productImgUrl
value.productNames = item.productName
}
})
return value
}
goDashboard = () => {
this.props.history.push('/layout/dashboard/overview')
}
handleChange = (value) => {
this.state.map.setOptions({
minZoom: 3,
maxZoom: 15,
})
this.setState({
areaNameTime: false
}, () => {
if (value === '中国') {
sessionStorage.setItem('newLang', 'zh-CN')
sessionStorage.setItem('langsValue', value)
window.location.reload()
} else {
sessionStorage.setItem('newLang', 'en-US')
sessionStorage.setItem('langsValue', value)
window.location.reload()
}
})
};
onChange = (id) => {
this.setState({
spinLoad: true
})
let newList = this.state.productListsNew.map(item => {
if (item.productId === id) {
let value = {}
value = { ...item, checked: !item.checked }
return value
} else {
return item
}
})
this.setState({
productListsNew: newList,
}, () => {
let mapZoom = this.state.map.getZoom()
if ((this.state.country === '中国' && mapZoom >= 13) || (this.state.country != '中国' && mapZoom >= 9)) {
this.setDistrictInfo()
} else {
this.setMapProvence()
}
})
};
selectChange = () => {
this.setState({
selectDown: !this.state.selectDown
})
}
search = (value, arrs, areaName) => {
this.setState({
spinLoad: true
})
let searchManager = this.state.searchManager
let map = this.state.map
let Microsoft = global.Microsoft
if (!searchManager) {
//Create an instance of the search manager and perform the search.
Microsoft.Maps.loadModule('Microsoft.Maps.Search', () => {
this.setState({
searchManager: new Microsoft.Maps.Search.SearchManager(map)
}, () => {
this.search(value)
})
});
} else {
//Remove any previous results from the map.
map.entities.clear();
if (sessionStorage.getItem('searchType') === 'country') {
sessionStorage.removeItem('searchType')
this.setState({
country: value,
}, () => {
this.geocodeQuery(value)
})
} else {
this.geocodeQuery(value, arrs, areaName)
}
}
}
geocodeQuery = (query, arrs, areaName) => {
let searchManager = this.state.searchManager
let map = this.state.map
let Microsoft = global.Microsoft
let areaNameTime = this.state.areaNameTime
let moresDown = this.state.moresDown
let laup = this.state.laup
let isOne = this.state.isOne
let isOneNew = this.state.isOneNew
let country = this.state.country
let province = this.state.province
let city = this.state.city
let district = this.state.district
let deviceIdSet = this.state.deviceIdSet
const getRegion = (value) => this.getRegion(value)
const getDistrict = (value) => this.getDistrict(value)
let locationArr = this.state.locationArr
let showUp = this.state.showUp
const setProvince = (value) => {
this.setState({
province: value
})
}
const setCity = (value) => {
this.setState({
city: value
})
}
const setDistrict = (value) => {
this.setState({
district: value
})
}
const getArrlocation = (value) => {
let locationArr = this.state.locationArr
locationArr.push(value)
this.setState({
locationArr: locationArr
})
}
const setZoom = (value) => {
this.setState({
zoomLevels: value
})
}
const loadModule = (value, geoDataRequestOptions) => {
this.loadModule(value, geoDataRequestOptions)
}
const setPolyArr = (value) => {
this.setState({
polyArr: value
})
}
const setPolyArrHandel = () => {
this.state.polyArr.map(item => {
item.setOptions({
visible: false
});
})
setPolyArr([])
}
const addDisTrue = () => {
if (map.getZoom() === map.getZoomRange().max) {
this.setState({
addDis: true
})
} else if (map.getZoom() === map.getZoomRange().min) {
this.setState({
reduceDis: true
})
}
}
const setLoading = () => {
this.setState({
spinLoad: true
})
}
const setFalseLoad = () => {
this.setState({
spinLoad: false
})
}
const setMessage = () => {
this.setState({
spinLoad: false
}, () => {
message.error(intl.get('noResults'))
})
}
const setStatus = (value) => {
return intl.get(value)
}
const setUp = (value) => {
this.setState({
showUp: value
}, () => {
geocode(query, arrs, areaName)
})
}
const setIsOne = (value) => {
this.setState({
isOne: value
}, () => {
if (this.state.isOne) {
let address = {}
address.country = country
if (country === '中国') {
address.province = province
address.city = city
address.district = areaName
address.deviceIdSet = deviceIdSet
getDistrict(address)
} else {
address.city = areaName
address.deviceIdSet = deviceIdSet
getDistrict(address)
}
}
})
}
const setLocationZoom = (value) => {
this.setState({
zoomsGetNew: value
})
}
const geocode = (query, arrs, areaName) => {
this.geocodeQuery(query, arrs, areaName)
}
const setProductList=()=>{
this.setProductList()
}
window.showInfoboxByGridKey = (id) => {
let arrs = id.split(',')
this.goMonitor(arrs[0], arrs[1])
}
let searchRequest = {
where: query,
callback: function (r) {
if (r && r.results && r.results.length > 0) {
let locs = []
for (let i = 0; i < r.results.length; i++) {
locs.push(r.results[i].location);
}
if (areaNameTime) {
if (country === '中国' && map.getZoom() < 13 || (country != '中国' && map.getZoom() < 9)) {
if (!isOneNew) {
let arrDevice = arrs && arrs.length > 3 ? arrs.slice(0, 3) : arrs
const maininfoboxTemplate = arrDevice ? arrDevice.map(item => {
return `<div class="map-infobox-item" key=${item.productId}>
<img alt='' src=${item.productImg} class='map-infobox-item-img' />
<div class='map-infobox-item-total'>${item.total}pcs</div>
</div>`
}) : ''
let arrsMain = ''
maininfoboxTemplate.map(item => {
if (item) {
arrsMain = arrsMain + item
}
})
let infoboxTemplate = `<a class="map-infobox ${arrs.length >= 3 ? 'map-infobox-click-three' : ""} ">
<div class="map-infobox-provenceArea" title='${areaName}' >${areaName}</div>
<div class="map-infobox-conBox ${arrs.length > 3 ? 'map-infobox-conBox-main' : ""}">{maininfoboxTemplate}
</div>
</a>`
let leftWidth = null
if (arrs.length >= 3) {
leftWidth = -69
} else {
leftWidth = -45
}
if (showUp) {
let infobox = new Microsoft.Maps.Infobox(r.results[0].location, {
htmlContent: infoboxTemplate.replace('{maininfoboxTemplate}', arrsMain),
offset: new Microsoft.Maps.Point(leftWidth, 0)
});
infobox.setMap(map);
getArrlocation(infobox)
Microsoft.Maps.Events.addHandler(infobox, "mouseenter", function (e) {
if (country === '中国') {
if (map.getZoom() < 8) {
let geoDataRequestOptions = {
entityType: 'AdminDivision1',
getAllPolygons: true
};
loadModule(areaName, geoDataRequestOptions)
} else if (map.getZoom() >= 8 && map.getZoom() < 10) {
let geoDataRequestOptions = {
entityType: 'AdminDivision2',
getAllPolygons: true
};
loadModule(areaName, geoDataRequestOptions)
} else if (map.getZoom() >= 10 && map.getZoom() < 13) {
let geoDataRequestOptions = {
entityType: 'PopulatedPlace',
getAllPolygons: true
};
loadModule(areaName, geoDataRequestOptions)
}
} else {
if (map.getZoom() < 9) {
let geoDataRequestOptions = {
entityType: 'AdminDivision1',
getAllPolygons: true
};
loadModule(areaName, geoDataRequestOptions)
}
}
if (arrs.length > 3) {
setUp(false)
infobox.setMap()
}
})
Microsoft.Maps.Events.addHandler(infobox, 'click', function () {
setLoading()
map.entities.clear();
setPolyArrHandel()
locationArr.map(iteminfo => {
iteminfo.setMap();
})
map.setOptions({
minZoom: 3,
maxZoom: 15,
})
let address = {}
address.country = country
if (country === '中国') {
if (map.getZoom() < 8) {
setProvince(areaName)
map.setView({
center: r.results[0].location,
zoom: 8
});
map.setOptions({
minZoom: 8,
maxZoom: 9,
})
addDisTrue()
setZoom(map.getZoom())
address.province = areaName
address.deviceIdSet = deviceIdSet
getRegion(address)
} else if (map.getZoom() >= 8 && map.getZoom() < 10) {
map.setView({
center: r.results[0].location,
zoom: 10
});
map.setOptions({
minZoom: 10,
maxZoom: 12,
})
addDisTrue()
setCity(areaName)
setZoom(map.getZoom())
address.province = province
address.city = areaName
address.deviceIdSet = deviceIdSet
getRegion(address)
} else if (map.getZoom() >= 10 && map.getZoom() < 13) {
if (!isOne && (!isOneNew)) {
setIsOne(true)
setDistrict(areaName)
}
}
} else {
if (map.getZoom() < 9) {
if (!isOne && (!isOneNew)) {
setIsOne(true)
setCity(areaName)
}
}
}
})
Microsoft.Maps.Events.addHandler(infobox, "mouseleave", function () {
map.entities.clear();
setPolyArrHandel()
})
} else {
const maininfoboxTemplateChange = arrs ? arrs.map(item => {
return `<div class="map-infobox-item" key=${item.productId}>
<img alt='' src=${item.productImg} class='map-infobox-item-img' />
<div class='map-infobox-item-total'>${item.total}pcs</div>
</div>`
}) : ''
let arrsMainChange = ''
maininfoboxTemplateChange.map(item => {
if (item) {
arrsMainChange = arrsMainChange + item
}
})
let infoboxTemplates = `<a class="map-infobox ${arrs.length > 6 ? 'map-infobox-click-fours' : ''} ${arrs.length > 3 ? 'map-infobox-conBox-margin' : ''} ${arrs.length >= 3 && arrs.length <= 6 ? 'map-infobox-click-three' : ""} ">
<div class="map-infobox-provenceArea" title='${areaName}' >${areaName}</div>
<div class="map-infobox-conBox ${arrs.length > 3 ? 'map-infobox-conBox-main' : ""}">{maininfoboxTemplate}
</div>
</a>`
let infobox = new Microsoft.Maps.Infobox(r.results[0].location, {
htmlContent: infoboxTemplates.replace('{maininfoboxTemplate}', arrsMainChange),
offset: new Microsoft.Maps.Point(leftWidth, 0)
});
infobox.setMap(map);
getArrlocation(infobox)
Microsoft.Maps.Events.addHandler(infobox, 'click', function () {
setLoading()
map.entities.clear();
setPolyArrHandel()
locationArr.map(iteminfo => {
iteminfo.setMap();
})
map.setOptions({
minZoom: 3,
maxZoom: 15,
})
let address = {}
address.country = country
if (country === '中国') {
if (map.getZoom() < 8) {
setProvince(areaName)
map.setView({
center: r.results[0].location,
zoom: 8
});
map.setOptions({
minZoom: 8,
maxZoom: 9,
})
addDisTrue()
setZoom(map.getZoom())
address.province = areaName
address.deviceIdSet = deviceIdSet
getRegion(address)
} else if (map.getZoom() >= 8 && map.getZoom() < 10) {
map.setView({
center: r.results[0].location,
zoom: 10
});
map.setOptions({
minZoom: 10,
maxZoom: 12,
})
addDisTrue()
setCity(areaName)
setZoom(map.getZoom())
address.province = province
address.city = areaName
address.deviceIdSet = deviceIdSet
getRegion(address)
} else if (map.getZoom() >= 10 && map.getZoom() < 13) {
if (!isOne && (!isOneNew)) {
setIsOne(true)
setDistrict(areaName)
}
}
} else {
if (map.getZoom() < 9) {
if (!isOne && (!isOneNew)) {
setIsOne(true)
setCity(areaName)
}
}
}
})
Microsoft.Maps.Events.addHandler(infobox, "mouseleave", function () {
if (arrs.length > 3) {
setUp(true)
infobox.setMap()
}
map.entities.clear();
setPolyArrHandel()
})
}
setFalseLoad()
} else {
let address = {}
address.country = country
if (country === '中国') {
map.setView({
center: r.results[0].location,
zoom: 13
});
map.setOptions({
minZoom: 13
})
addDisTrue()
setZoom(map.getZoom())
// address.province = province
// address.city = city
// address.district = district
// address.deviceIdSet = deviceIdSet
// getDistrict(address)
setProductList()
} else {
map.setView({
center: r.results[0].location,
zoom: 9
});
map.setOptions({
minZoom: 9
})
addDisTrue()
setZoom(map.getZoom())
setProductList()
}
}
} else {
let arrDevice = arrs.length > 3 ? arrs.slice(0, 3) : arrs
let mainConItem = arrDevice.map(item => {
return `<div class='map-infobox-zooms-box'>
<a href='javascript:void(0);' onclick='showInfoboxByGridKey("${item.productId},${item.pkId} ");'><img alt='' src=${item.productImg} class='map-infobox-zooms-img ${item.onlineStatus == 1 ? '' : 'map-infobox-zooms-img-meng'}'/></a>
<div class='map-infobox-zooms-status ${item.onlineStatus == 1 ? 'map-infobox-zooms-status-green' : 'map-infobox-zooms-status-grey'}' >${item.onlineStatus == 1 ? setStatus('online') : setStatus('offline')}</div>
</div>`
})
let arrsMain = ''
mainConItem.map(item => {
if (item) {
arrsMain = arrsMain + item
}
})
let infoboxTemplates = `<div class="map-infobox-zooms">
<div class="map-infobox-zooms-title"><span title='${areaName}' class="map-infobox-zooms-titles">${areaName}</span></div>
<div class='map-infobox-zooms-img-con ${arrs.length >= 3 ? 'map-infobox-zooms-img-cons3' : ''} ${arrs.length === 2 ? 'map-infobox-zooms-img-cons2' : ''}'>
<div class='map-infobox-zooms-img-cons'>{mainCon}</div>
<a>${arrs.length > 3 ? `<img alt='' onclick="Heightchange()" src=${moresDown} class='map-infobox-item-downs' />` : ''}</a>
</div>
<div class='map-infobox-zooms-icons-online' ></div>
</div>`
let infobox = new Microsoft.Maps.Infobox(r.results[0].location, {
htmlContent: infoboxTemplates.replace('{mainCon}', arrsMain),
offset: new Microsoft.Maps.Point(-9.84, 0)
});
infobox.setMap(map);
Microsoft.Maps.Events.addHandler(infobox, "mouseenter", function (e) {
window.Heightchange = () => {
let mainConItems = arrs.map(item => {
return `<div class='map-infobox-zooms-box'>
<a href='javascript:void(0);' onclick='showInfoboxByGridKey("${item.productId},${item.pkId} ");'> <img alt='' src=${item.productImg} class='map-infobox-zooms-img ${item.onlineStatus == 1 ? '' : 'map-infobox-zooms-img-meng'}'/></a>
<div class='map-infobox-zooms-status ${item.onlineStatus == 1 ? 'map-infobox-zooms-status-green' : 'map-infobox-zooms-status-grey'}' >${item.onlineStatus == 1 ? setStatus('online') : setStatus('offline')}</div>
</div>`
})
let arrsMainss = ''
mainConItems.map(item => {
if (item) {
arrsMainss = arrsMainss + item
}
})
let infoboxTemplates = `<div class="map-infobox-zooms">
<div class="map-infobox-zooms-title"><span class="map-infobox-zooms-titles" title='${areaName}' >${areaName}</span></div>
<div class='map-infobox-zooms-img-con ${arrs.length >= 3 ? 'map-infobox-zooms-img-cons3' : ''} ${arrs.length === 2 ? 'map-infobox-zooms-img-cons2' : ''}'>
<div class='map-infobox-zooms-img-cons'>{mainCon}</div>
<a>${arrs.length > 3 ? `<img alt='' onclick="backchange()" src=${laup} class='map-infobox-item-downs' />` : ''}</a>
</div>
<div class='map-infobox-zooms-icons-online' ></div>
</div>`
infobox.setOptions({
htmlContent: infoboxTemplates.replace('{mainCon}', arrsMainss),
})
}
window.backchange = () => {
infobox.setOptions({
htmlContent: infoboxTemplates.replace('{mainCon}', arrsMain),
})
}
})
setFalseLoad()
getArrlocation(infobox)
}
} else {
let newLang = sessionStorage.getItem('newLang')
let bounds;
if (r.results.length == 1 || newLang === 'en-US') {
bounds = r.results[0].bestView;
} else {
bounds = Microsoft.Maps.LocationRect.fromLocations(locs);
}
map.setView({ bounds: bounds });
let address = {}
address.country = country
getRegion(address)
setZoom(map.getZoom())
setLocationZoom(map.getZoom())
if (country === '中国') {
map.setOptions({
minZoom: 5,
maxZoom: 7
})
addDisTrue()
} else {
map.setOptions({
minZoom: 4,
maxZoom: 8
})
addDisTrue()
}
}
}
},
errorCallback: function (e) {
console.log(e)
setMessage()
}
};
searchManager.geocode(searchRequest);
}
setPolyArrs = (value) => {
this.setState({
polyArr: value
})
}
loadModule = (places, geoDataRequestOptions) => {//使用GeoData API管理器获取边界
let map = this.state.map
map.entities.clear();
let arrsPlaces = []
arrsPlaces.push(places)
let Microsoft = global.Microsoft
const setPolyArr = (value) => {
this.setPolyArrs(value)
}
// • Postcode4：通过聚合Postcode3区域创建的Postcode3之后的下一个最大邮政编码类别。
Microsoft.Maps.loadModule('Microsoft.Maps.SpatialDataService', () => {
//使用GeoData API管理器获取边界
Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary(arrsPlaces, geoDataRequestOptions,
map,
function (data) {
if (data.results && data.results.length > 0) {
let poly = data.results[0].Polygons;
for (let i = 0; i < poly.length; i++) {
poly[i].setOptions({
fillColor: 'rgba(105, 0, 140, 0.2)',
strokeColor: 'rgba(105, 0, 140, 0.7)',
strokeThickness: 1
});
}
map.entities.push(poly);
setPolyArr(poly)
}
},
function errCallback(callbackState, networkStatus, statusMessage) {
console.log(callbackState);
console.log(networkStatus);
console.log(statusMessage);
});
});
}
backRegion = () => {
let map = this.state.map
let zoomLevel = map.getZoom()
if (zoomLevel >= 8 && this.state.country == '中国' || (zoomLevel >= 9 && this.state.country != '中国')) {
this.setState({
spinLoad: true
})
map.setOptions({
minZoom: 3,
maxZoom: 15,
})
if (this.state.country === '中国') {
if (zoomLevel >= 8 && zoomLevel < 10) {//市 找省 传国家
map.setView({
center: map.getCenter(),
zoom: 5
});
let address = {}
address.country = this.state.country
this.getRegion(address)
} else if (zoomLevel >= 10 && zoomLevel < 13) {//区 找市 传国家 省
map.setView({
center: map.getCenter(),
zoom: 8
});
let address = {}
address.country = this.state.country
address.province = this.state.province
this.getRegion(address)
} else if (zoomLevel >= 13) {//详情 找区 传国家 省 市
map.setView({
center: map.getCenter(),
zoom: 10
});
this.setState({
isOne: false,
isOneNew: false,
}, () => {
let address = {}
address.country = this.state.country
address.province = this.state.province
address.city = this.state.city
this.getRegion(address)
})
}
} else {
if (zoomLevel >= 9) {
this.setState({
isOne: false,
isOneNew: false,
}, () => {
let address = {}
address.country = this.state.country
this.getRegion(address)
map.setView({
center:map.getCenter(),
zoom: this.state.country=='United States'?8:this.state.zoomsGetNew
});
})
}
}
}
}
addbutton = () => {//add
let map = this.state.map
let center = map.getCenter()
let zoomLevel = map.getZoom()
if (zoomLevel < map.getZoomRange().max) {
map.setView({
center: center,
zoom: zoomLevel + 1
});
}
}
reducebutton = () => {
let map = this.state.map
let center = map.getCenter()
let zoomLevel = map.getZoom()
if (zoomLevel > map.getZoomRange().min) {
map.setView({
center: center,
zoom: zoomLevel - 1
});
}
}
goMonitor = (id, devId) => {//id:productId
this.setState({
spinLoad: true
})
getDeviceInteraction(id).then(res => {
console.log('getDeviceInteraction', res)
let data = res.responseData
if (res.statusMsg === 'success') {
this.setState({
webUrl: data.webUrl,
spinLoad: false
}, () => {
const wins = window.open('about:blank');
wins.location.href = `${this.state.webUrl}?devId=${devId}&lang=${localStorage.getItem('locale') || localStorage.getItem("defaultLng") || 'zh'}&token=${getToken()}&refreshToken=${getRefreshToken()}`
})
} else if (res.statusCode === 812) {
this.setState({
spinLoad: false
}, () => {
message.error(intl.get('monitorNotExit'))
})
}
}).catch(err => {
this.setState({
spinLoad: false
})
})
}
getProductListsNew = (item) => {
return <div className='map-search-right-main-item' key={item.productId}>
<Checkbox onChange={() => this.onChange(item.productId)} checked={item.checked}>
<div className={`map-search-right-main-item-con ${item.checked ? 'map-search-right-main-item-con-focuse' : ''}`} >
<img className='map-search-right-main-item-con-img' src={this.getProductInfos(item.productId).productImgs} alt=''></img>
<div className='map-search-right-main-item-con-info'>
<Tooltip placement="topLeft" title={this.getProductInfos(item.productId).productNames}>
<div className='map-search-right-main-item-con-info-name'>{this.getProductInfos(item.productId).productNames}</div>
</Tooltip>
<div className='map-search-right-main-item-con-info-num'>
<div className='map-search-right-main-item-con-info-num-con'>{intl.get('total')}: {item.total}</div>
<div className='map-search-right-main-item-con-info-num-con map-green-color'>{intl.get('online')}: {item.onlineTotal}</div>
<div className='map-search-right-main-item-con-info-num-con map-red-color'>{intl.get('offline')}: {item.offlineTotal}</div>
</div>
</div>
</div>
</Checkbox>
</div>
}
render() {
return (
<div className='map-container'>
<div className={`map-spin ${this.state.spinLoad ? '' : 'map-display-nones-maxmore'}`} >
<Spin></Spin>
</div>
<div className='map-top'>
<a className='map-top-logo' onClick={this.goDashboard}></a>
<a className='map-top-title' onClick={this.goDashboard}></a>
</div>
<div className='map-search'>
<Select
style={{
width: '355px',
}}
placeholder={intl.get('selectTargetCountry')}
value={this.state.choosLocation ? this.state.choosLocation : undefined}
onChange={this.handleChange}
options={this.state.countryOptions}
/>
<div className='map-search-right'>
<a className='map-search-right-top' onClick={this.selectChange}>
<div className='map-search-right-top-word'>
{intl.get('selectProduction')}
</div>
<img onClick={this.selectChange} className='map-search-right-top-vector' src={this.state.vector} alt='' ></img>
</a>
<div className={`map-search-right-main ${this.state.selectDown ? '' : 'map-display-nones'}`} >
{
this.state.productListsNew && this.state.productListsNew.length > 0 ? this.state.productListsNew.map(item => {
return this.getProductListsNew(item)
}) : <div className='map-search-right-main-item-null'>{this.state.noData ? intl.get('notData') : intl.get('selectCountry')}</div>
}
</div>
</div>
</div>
<Tooltip placement="topLeft" title={intl.get('returnLevel')}>
<a className='map-backLast-locateMe' onClick={this.backRegion}><img src={this.state.backTrue ? this.state.backIMg : this.state.backIMgDis} alt='' className='map-backLast-img'></img></a>
</Tooltip>
<div className='map-test'></div>
<Tooltip placement="topLeft" title={intl.get('zoomIn')}>
<a className='map-backLast-locateMe map-backLast-add' onClick={this.addbutton}><img src={this.state.addDis ? this.state.disAddSetView : this.state.addSetView} alt='' className='map-backLast-img-add'></img></a>
</Tooltip>
<Tooltip placement="topLeft" title={intl.get('zoomOut')}>
<a className='map-backLast-locateMe map-backLast-reduce' onClick={this.reducebutton}><img src={this.state.reduceDis ? this.state.disReduSetView : this.state.reduSetView} alt='' className='map-backLast-img-reduce'></img></a>
</Tooltip>
<div className='map-note'>Copyright @2022 IoT Foundation Web - All Rights Reserved 沪 ICP 备******号</div>
<div id='myMap' className='map-main-container' style={{}}></div>
</div>
)
}
}
2399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
