|
@ -5,7 +5,8 @@ import Charge50 from "@/assets/images/map/charge50.png" |
|
|
import Charge20 from "@/assets/images/map/charge20.png" |
|
|
import Charge20 from "@/assets/images/map/charge20.png" |
|
|
import Chargelow from "@/assets/images/map/chargelow.png" |
|
|
import Chargelow from "@/assets/images/map/chargelow.png" |
|
|
import mapLocation from '@/assets/images/map/map-location.png' |
|
|
import mapLocation from '@/assets/images/map/map-location.png' |
|
|
|
|
|
|
|
|
|
|
|
import errorImg from '@/assets/images/error-img-new.png' |
|
|
|
|
|
import { Icon } from "@/components" |
|
|
import citys from './data' |
|
|
import citys from './data' |
|
|
import ajax from "@/services"; |
|
|
import ajax from "@/services"; |
|
|
function BaseMap(props) { |
|
|
function BaseMap(props) { |
|
@ -46,18 +47,23 @@ function BaseMap(props) { |
|
|
|
|
|
|
|
|
let style = [{ |
|
|
let style = [{ |
|
|
url: Charge50, |
|
|
url: Charge50, |
|
|
anchor: new AMap.Pixel(22, 22), |
|
|
|
|
|
size: new AMap.Size(44, 44) |
|
|
|
|
|
|
|
|
anchor: new AMap.Pixel(16, 24), |
|
|
|
|
|
size: new AMap.Size(32, 48) |
|
|
}, { |
|
|
}, { |
|
|
url: Charge20, |
|
|
url: Charge20, |
|
|
anchor: new AMap.Pixel(22, 22), |
|
|
|
|
|
size: new AMap.Size(44, 44) |
|
|
|
|
|
|
|
|
anchor: new AMap.Pixel(16, 24), |
|
|
|
|
|
size: new AMap.Size(32, 48) |
|
|
}, { |
|
|
}, { |
|
|
url: Chargelow, |
|
|
url: Chargelow, |
|
|
anchor: new AMap.Pixel(22, 22), |
|
|
|
|
|
size: new AMap.Size(44, 44) |
|
|
|
|
|
|
|
|
anchor: new AMap.Pixel(16, 24), |
|
|
|
|
|
size: new AMap.Size(32, 48) |
|
|
} |
|
|
} |
|
|
]; |
|
|
]; |
|
|
|
|
|
const handleImgError = (e) => { |
|
|
|
|
|
let evn = e || event |
|
|
|
|
|
let img = evn.srcElement ? evn.srcElement : evn.target |
|
|
|
|
|
img.src = errorImg |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const initMap = () => { |
|
|
const initMap = () => { |
|
@ -120,8 +126,6 @@ function BaseMap(props) { |
|
|
infoRef.current=true |
|
|
infoRef.current=true |
|
|
} |
|
|
} |
|
|
},[childInfo]) |
|
|
},[childInfo]) |
|
|
console.log(info); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
if (map&&data.length!=0) { |
|
|
if (map&&data.length!=0) { |
|
|
var mass = new AMap.MassMarks(data, { |
|
|
var mass = new AMap.MassMarks(data, { |
|
@ -194,8 +198,8 @@ function BaseMap(props) { |
|
|
{hasInit ? renderChildren(map) : null} |
|
|
{hasInit ? renderChildren(map) : null} |
|
|
{ showInfo&&<div className="map-item"> |
|
|
{ showInfo&&<div className="map-item"> |
|
|
<div className="name">{info.name}</div> |
|
|
<div className="name">{info.name}</div> |
|
|
<div className="location"><img src={mapLocation} title={info.location} />{info.location}</div> |
|
|
|
|
|
<div className="pic"><img src={info.pic} /></div> |
|
|
|
|
|
|
|
|
<div className="location" title={info.location}><Icon type="dingwei-copy"></Icon>{info.location}</div> |
|
|
|
|
|
<div className="pic"><img src={info.pic} onError={handleImgError} /></div> |
|
|
<div className="item"><div>慢充占用</div><div>{info.slow_charge}</div></div> |
|
|
<div className="item"><div>慢充占用</div><div>{info.slow_charge}</div></div> |
|
|
<div className="item"><div>快充占用</div><div>{info.fast_charge}</div></div> |
|
|
<div className="item"><div>快充占用</div><div>{info.fast_charge}</div></div> |
|
|
<div className="item"><div>所属厂家</div><div>{info.factory}</div></div> |
|
|
<div className="item"><div>所属厂家</div><div>{info.factory}</div></div> |
|
|