205 lines
7.1 KiB
PHP
Executable File
205 lines
7.1 KiB
PHP
Executable File
<?php
|
|
|
|
/**
|
|
* @Author: fm453
|
|
* @Date: 2018-11-22 12:36:48
|
|
* @Last Modified by: fm453
|
|
* @Last Modified time: 2018-11-22 23:55:18
|
|
* @Email: fm453@lukegzs.com
|
|
*/
|
|
|
|
use yii\helpers\Html;
|
|
use yii\bootstrap\ActiveForm;
|
|
use yii\helpers\Url;
|
|
use yii\widgets\LinkPager;
|
|
|
|
$this->title = '地理位置选择';
|
|
|
|
?>
|
|
<style>
|
|
body .wrapper{
|
|
height: 100%;
|
|
margin: 0;
|
|
width: 100%;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
.map {
|
|
height: 100%;
|
|
width: 100%;
|
|
float: left;
|
|
z-index:99;
|
|
}
|
|
</style>
|
|
<!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PositionPicker/examples/positionPicker.html -->
|
|
<!-- <base href="//webapi.amap.com/ui/1.0/ui/misc/PositionPicker/examples/" /> -->
|
|
<div class="wrapper wrapper-content">
|
|
<div class="ibox-content" style="padding:0;width:100%;height:100%;">
|
|
<form class="form-search" method="get" action="<?=Url::toRoute('index/map')?>" role="form">
|
|
<input type="hidden" name="_csrf-backend" value="<?= Yii::$app->getRequest()->getCsrfToken();?>" />
|
|
<div class="form-group btn btn-block" style="position:fixed;top:10px;z-index: 100;background-color: rgba(0,0,0,.5);">
|
|
<div class="col-sm-7">
|
|
<div class="input-group">
|
|
<span class="input-group-btn"> <button type="button" class="btn btn-primary">输入地址:
|
|
</button> </span>
|
|
<input type="text" class="form-control" id="keyword" name="keyword" value="<?=isset($search['keyword']) ? $search['keyword']:''?>" placeholder="输入地址关键词进行查询" autocomplete="off">
|
|
<span class="hidden input-group-btn"> <button type="submit" class="btn btn-info">搜索
|
|
</button> </span>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="input-group">
|
|
<span class="input-group-btn"> <button type="button" class="btn btn-primary">纬度
|
|
</button> </span>
|
|
<input type="text" class="form-control" id="lat" name="lat" value="" autocomplete="off">
|
|
<span class="input-group-btn"> <button type="button" class="btn btn-primary">经度
|
|
</button> </span>
|
|
<input type="text" class="form-control" id="lng" name="lng" value="" autocomplete="off">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div id="container" class="map" tabindex="0" style="z-index: 0;"></div>
|
|
<div class="" style="position:fixed;bottom:10px;left:50%;margin-left:-75px;width:150px;z-index: 100;">
|
|
<button onclick="callback();" class="btn btn-lg btn-primary" type="button">
|
|
<i class="ace-icon fa fa-check bigger-110"></i>
|
|
确定选择
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function callback(){
|
|
parent.<?=$callback;?>($("#lat").val(),$("#lng").val(),$("#keyword").val());
|
|
}
|
|
</script>
|
|
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.10&key=fea3f28a32780b33d97b2afb9a5236fe&plugin=AMap.ToolBar'></script>
|
|
<!-- UI组件库 1.0 -->
|
|
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
|
|
<script type="text/javascript">
|
|
AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
|
|
var lng = "<?=$lng?>";
|
|
var lat = "<?=$lat?>";
|
|
if(lng != 0 && lat != 0){
|
|
lnglatXY = [lng, lat]; //纬度，经度
|
|
}else{
|
|
lnglatXY = [109.512444,18.252986]; //三亚市政务中心
|
|
}
|
|
|
|
var map = new AMap.Map('container', {
|
|
zoom: 16,
|
|
scrollWheel: true,
|
|
resizeEnable: true,
|
|
center: lnglatXY
|
|
});
|
|
var positionPicker = new PositionPicker({
|
|
mode: 'dragMarker',
|
|
map: map
|
|
});
|
|
|
|
positionPicker.on('success', function(positionResult) {
|
|
console.log(positionResult);
|
|
$("#keyword").val(positionResult.address);
|
|
var pos = positionResult.position;
|
|
$("#lng").val(pos.lng);
|
|
$("#lat").val(pos.lat);
|
|
});
|
|
positionPicker.on('fail', function(positionResult) {
|
|
console.log(positionResult);
|
|
$("#lng").val('');
|
|
$("#lat").val('');
|
|
});
|
|
|
|
positionPicker.start(map.getBounds().getSouthWest());
|
|
// positionPicker.start();
|
|
map.panBy(0, 1);
|
|
map.addControl(new AMap.ToolBar({
|
|
liteStyle: true
|
|
}))
|
|
|
|
AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){
|
|
var autoOptions = {
|
|
city: "三亚市", //城市，默认全国
|
|
input: "keyword"//使用联想输入的input的id
|
|
};
|
|
autocomplete= new AMap.Autocomplete(autoOptions);
|
|
|
|
var placeSearch = new AMap.PlaceSearch({
|
|
city:'三亚市',
|
|
map:map
|
|
})
|
|
//下拉框选择
|
|
AMap.event.addListener(autocomplete, "select", function(e){
|
|
placeSearch.search(e.poi.name)
|
|
});
|
|
//关键字查询
|
|
// placeSearch.search('<?=$search['keyword']?>');
|
|
});
|
|
|
|
//设置初始化标注数据
|
|
var geocoder = new AMap.Geocoder({
|
|
radius: 1000,
|
|
extensions: "all"
|
|
});
|
|
function getAddr(lnglatXY){
|
|
geocoder.getAddress(lnglatXY, function(status, result) {
|
|
// console.log(result);
|
|
if (status === 'complete' && result.info === 'OK') {
|
|
$("#keyword").val(result.regeocode.formattedAddress);
|
|
}
|
|
});
|
|
}
|
|
getAddr(lnglatXY);
|
|
|
|
//设置地图中心点
|
|
map.setCenter(lnglatXY);
|
|
var marker = new AMap.Marker({ //加点
|
|
map: map,
|
|
position: lnglatXY
|
|
});
|
|
// map.setFitView(); //自动调整视图范围
|
|
|
|
//绑定点选maker事件
|
|
function showInfoClick(e){
|
|
console.log(e);
|
|
var lnglatXY = [e.lnglat.getLng(),e.lnglat.getLat()];
|
|
getAddr(lnglatXY);
|
|
map.setCenter(lnglatXY);
|
|
map.clearMap(); // 清除地图覆盖物
|
|
var marker = new AMap.Marker({ //加点
|
|
map: map,
|
|
position: lnglatXY
|
|
});
|
|
map.setFitView();
|
|
$("#lng").val(e.lnglat.getLng());
|
|
$("#lat").val(e.lnglat.getLat());
|
|
var text = '您在 [ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ] 的位置单击了地图！'
|
|
console.log(text);
|
|
}
|
|
|
|
function showInfoDbClick(e){
|
|
console.log(e);
|
|
var lnglatXY = [e.lnglat.getLng(),e.lnglat.getLat()];
|
|
getAddr(lnglatXY);
|
|
map.setCenter(lnglatXY);
|
|
map.clearMap(); // 清除地图覆盖物
|
|
var marker = new AMap.Marker({ //加点
|
|
map: map,
|
|
position: lnglatXY
|
|
});
|
|
map.setFitView();
|
|
$("#lng").val(e.lnglat.getLng());
|
|
$("#lat").val(e.lnglat.getLat());
|
|
var text = '您在 [ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ] 的位置双击了地图！'
|
|
console.log(text);
|
|
}
|
|
|
|
map.on('click', showInfoClick);
|
|
map.on('dblclick', showInfoDbClick);
|
|
|
|
});
|
|
</script>
|