地图选址的统一代码在/mifenlei/admin/view/ditu.html需要哪个可以自行复制全部替换即可
目前系统默认的是下图模式
代码是
<!--地图选点-->
<div class="jwd" style="display: none;">
<div id="container" class="map" tabindex="0"></div>
<div id='right'>
<div>
<div class='title'>选择模式</div>
<input type='radio' name='mode' value='dragMap' checked>拖拽地图模式</input>
</br>
<input type='radio' name='mode' value='dragMarker'>Marker模式</input>
</div>
<div style="display: none;">
<button id='start'>开始选点</button>
<button id='stop'>关闭选点</button>
</div>
<div>
<div class='title'>选址结果</div>
<div class='c'>经纬度:</div>
<div id='lnglat'></div>
<div class='c'>地址:</div>
<div id='address'></div>
</div>
</div>
</div>
<!-- UI组件库 1.0 -->
<script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key={:config("qita.jwd")}&plugin=AMap.ToolBar'></script>
<script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
<script type="text/javascript">
layui.use('layer', function(){
var layer = layui.layer;
$('.yemian').on('click', function(){
var css = $(this).attr("css");
var ws = $(this).attr("w");
var hs = $(this).attr("h");
var tblr = $(this).attr("tblr");
var anim = $(this).attr("anim");
var skin = $(this).attr("skin");
var title = $(this).attr("title");
var shade = $(this).attr("shade");
if(!title){
var title = false;
}
if(!shade){
var shade = 0.5;
}
layer.open({
btn: ['确定'],
type: 1,
offset: tblr,
skin: skin,
shade: shade,
closeBtn: 0,
title: title,
shadeClose: true,
anim: anim,
area: [''+ws+'', ''+hs+''], //宽高
content: $('.'+css),
});
AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
var map = new AMap.Map('container', {
zoom: 16,
scrollWheel: false
})
var positionPicker = new PositionPicker({
mode: 'dragMap',
map: map
});
positionPicker.on('success', function(positionResult) {
document.getElementById('lnglat').innerHTML = positionResult.position;
$("input[name=jwd]").val(positionResult.position);
document.getElementById('address').innerHTML = positionResult.address;
$("input[name=dizhi]").val(positionResult.address);
});
positionPicker.on('fail', function(positionResult) {
document.getElementById('lnglat').innerHTML = ' ';
document.getElementById('address').innerHTML = ' ';
document.getElementById('nearestJunction').innerHTML = ' ';
document.getElementById('nearestRoad').innerHTML = ' ';
document.getElementById('nearestPOI').innerHTML = ' ';
});
var onModeChange = function(e) {
positionPicker.setMode(e.target.value)
}
var startButton = document.getElementById('start');
var stopButton = document.getElementById('stop');
var dragMapMode = document.getElementsByName('mode')[0];
var dragMarkerMode = document.getElementsByName('mode')[1];
startButton.addEventListener('click', function() {
positionPicker.start(map.getBounds().getSouthWest())
})
stopButton.addEventListener('click', function() {
positionPicker.stop();
})
dragMapMode.addEventListener('change', onModeChange)
dragMarkerMode.addEventListener('change', onModeChange);
positionPicker.start();
map.panBy(0, 1);
map.addControl(new AMap.ToolBar({
liteStyle: true
}))
});
});
});
</script>
搜索模式
代码是
<style>
#container{width:100%;height:100%;margin:0;font-size:13px}
#pickerBox{z-index:9999;position:absolute;top:30px;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
#pickerInput{width:200px;padding:5px 5px;border:1px solid #1e9fff}
#poiInfo{background:#fff}
.amap_lib_placeSearch .poibox.highlight{background-color:#cae1ff}
.amap_lib_placeSearch .poi-more{display:none!important}
</style>
<div class="jwd" style="display: none;">
<div id="container" class="map" tabindex="0"></div>
<div id="pickerBox">
<input id="pickerInput" placeholder="输入关键字选取地点" />
<div id="poiInfo"></div>
</div>
</div>
<script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key={:config("qita.jwd")}'></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
<script type="text/javascript">
layui.use('layer', function(){
var layer = layui.layer;
$('.yemian').on('click', function(){
var css = $(this).attr("css");
var ws = $(this).attr("w");
var hs = $(this).attr("h");
var tblr = $(this).attr("tblr");
var anim = $(this).attr("anim");
var skin = $(this).attr("skin");
var title = $(this).attr("title");
var shade = $(this).attr("shade");
if(!title){
var title = false;
}
if(!shade){
var shade = 0.5;
}
layer.open({
btn: ['确定'],
type: 1,
offset: tblr,
skin: skin,
shade: shade,
closeBtn: 0,
title: title,
shadeClose: true,
anim: anim,
area: [''+ws+'', ''+hs+''], //宽高
content: $('.'+css),
});
// 开始
var map = new AMap.Map('container', {
zoom: 10
});
AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
var poiPicker = new PoiPicker({
//city:'北京',
input: 'pickerInput'
});
//初始化poiPicker
poiPickerReady(poiPicker);
});
function poiPickerReady(poiPicker) {
window.poiPicker = poiPicker;
var marker = new AMap.Marker();
var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -20)
});
//选取了某个POI
poiPicker.on('poiPicked', function(poiResult) {
var source = poiResult.source,
poi = poiResult.item,
info = {
source: source,
id: poi.id,
name: poi.name,
location: poi.location.toString(),
address: poi.address
};
marker.setMap(map);
infoWindow.setMap(map);
marker.setPosition(poi.location);
infoWindow.setPosition(poi.location);
infoWindow.setContent(poi.name);
infoWindow.open(map, marker.getPosition());
var jsonObj=JSON.stringify(info, null, 2);
$("input[name=jwd]").val(poi.location.toString());
$("input[name=dizhi]").val(poi.address+poi.name);
map.setCenter(marker.getPosition());
});
}
});
});
</script>