119 lines
4.2 KiB
PHP
119 lines
4.2 KiB
PHP
<div class="form-group row">
|
|
<div class="col-md-2 control-label">地址</div>
|
|
<div class="col-md-8">
|
|
<input type="text" class="form-control prevent-default" value="{{ $value['address'] }}" id="address-input" autocomplete="off" placeholder="输入地址搜索" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group row">
|
|
<div class="col-md-2 control-label">坐标</div>
|
|
<div class="col-md-4">
|
|
<input type="text" class="form-control prevent-default" value="{{ $value['lng'] }}" id="lng-input" autocomplete="off" />
|
|
</div>
|
|
<div class="col-md-4">
|
|
<input type="text" class="form-control prevent-default" value="{{ $value['lat'] }}" id="lat-input" autocomplete="off" />
|
|
</div>
|
|
</div>
|
|
|
|
<input type="hidden" name="{{ $name }}" value="{{ json_encode($value) }}" id="value-input">
|
|
<div id="amap" style="width:100%; height: 600px;"></div>
|
|
<script type="text/javascript">
|
|
window._AMapSecurityConfig = {
|
|
securityJsCode: '{{ $security_code }}',
|
|
}
|
|
</script>
|
|
<script src="https://webapi.amap.com/loader.js"></script>
|
|
<script>
|
|
var value = JSON.parse('{!! json_encode($value) !!}')
|
|
|
|
var elements = document.getElementsByClassName('prevent-default')
|
|
for (let i = 0; i < elements.length; i++) {
|
|
elements[i].addEventListener('keydown', (e) => {
|
|
// 阻止默认的回车事件
|
|
if (e.keyCode === 13) {
|
|
e.preventDefault()
|
|
}
|
|
})
|
|
}
|
|
|
|
AMapLoader.load({
|
|
"key": "{{ $key }}",
|
|
"version": "2.0",
|
|
"plugins": ["AMap.AutoComplete", "AMap.Geocoder"],
|
|
}).then((AMap)=>{
|
|
var lngInput = document.getElementById('lng-input')
|
|
var latInput = document.getElementById('lat-input')
|
|
var addressInput = document.getElementById('address-input')
|
|
var point = (value.lng && value.lat) ? [value.lng, value.lat] : [116.397428, 39.90923]
|
|
var pointMarker = new AMap.Marker({ position: point })
|
|
|
|
var map = new AMap.Map("amap", {
|
|
zoom: 12,
|
|
center: point
|
|
});
|
|
|
|
// 添加默认标记
|
|
map.add(pointMarker)
|
|
|
|
// 更新点标记
|
|
function updatePoint(lng, lat) {
|
|
if (pointMarker) {
|
|
map.remove(pointMarker)
|
|
}
|
|
|
|
point = [lng, lat]
|
|
pointMarker = new AMap.Marker({ position: point })
|
|
map.add(pointMarker)
|
|
map.setCenter(point)
|
|
lngInput.value = lng
|
|
latInput.value = lat
|
|
document.getElementById('value-input').value = JSON.stringify({ address: addressInput.value, lng, lat })
|
|
}
|
|
|
|
// 输入框自动补全
|
|
var autoComplete = new AMap.AutoComplete({ input: 'address-input' })
|
|
autoComplete.on('select', (e) => {
|
|
if (e.poi && e.poi.location) {
|
|
addressInput.value = e.poi.name
|
|
updatePoint(e.poi.location.lng, e.poi.location.lat)
|
|
}
|
|
})
|
|
|
|
// 地址解析
|
|
var geocoder = new AMap.Geocoder()
|
|
|
|
// 监听地图单击事件
|
|
map.on("click", (e) => {
|
|
if (e.lnglat) {
|
|
geocoder.getAddress([e.lnglat.lng, e.lnglat.lat], (status, result) => {
|
|
if (status === 'complete' && result.regeocode) {
|
|
addressInput.value = result.regeocode.formattedAddress
|
|
updatePoint(e.lnglat.lng, e.lnglat.lat)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
|
|
// 监听坐标, 解析出地址
|
|
function handlePositionInput(e) {
|
|
if (lngInput.value && latInput.value) {
|
|
geocoder.getAddress([lngInput.value, latInput.value], (status, result) => {
|
|
if (status === 'complete' && result.regeocode) {
|
|
addressInput.value = result.regeocode.formattedAddress
|
|
updatePoint(lngInput.value, latInput.value)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
lngInput.addEventListener('blur', handlePositionInput)
|
|
latInput.addEventListener('blur', handlePositionInput)
|
|
|
|
}).catch((e)=>{
|
|
if (e === '禁止多种API加载方式混用') {
|
|
window.location.reload()
|
|
}
|
|
console.error(e);
|
|
});
|
|
|
|
</script>
|