分享两个选址关键字和拖拽选址

分享交流 未结
收藏
0 134
梦雨
梦雨 旗舰授权 07月06日 11:15
点赞:0 点赞

地图选址的统一代码在/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>


回帖

    消灭零回复