自定义图标

自定义PositionPicker的选点标记的样式。

源代码编辑器
<!-- 重点参数：iconStyle -->
<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/misc/PositionPicker/examples/positionPicker2.html -->
    <base href="//webapi.amap.com/ui/1.1/ui/misc/PositionPicker/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>自定义图标</title>
    <style>
    html,
    body {
        height: 100%;
        margin: 0;
        width: 100%;
        padding: 0;
        overflow: hidden;
        font-size: 13px;
    }
    
    .map {
        height: 100%;
        width: 60%;
        float: left;
    }
    
    #right {
        color: #444;
        background-color: #f8f8f8;
        width: 40%;
        float: left;
        height: 100%;
    }
    
    #start,
    #stop,
    #right input {
        margin: 4px;
        margin-left: 15px;
    }
    
    .title {
        width: 100%;
        background-color: #dadada
    }
    
    button {
        border: solid 1px;
        margin-left: 15px;
        background-color: #dadafa;
    }
    
    .c {
        font-weight: 600;
        padding-left: 15px;
        padding-top: 4px;
    }
    
    #lnglat,
    #address,
    #nearestJunction,
    #nearestRoad,
    #nearestPOI,
    .title {
        padding-left: 15px;
    }
    </style>
</head>

<body>
    <div id="container" class="map" tabindex="0"></div>
    <div id='right'>
        <div>
            <div class='title'>选择模式</div>
            <input type='radio' name='mode' value='dragMap'>拖拽地图模式</input>
            </br>
            <input type='radio' name='mode' value='dragMarker' checked>拖拽Marker模式</input>
        </div>
        <div>
            <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 class='c'>最近的路口:</div>
            <div id='nearestJunction'></div>
            <div class='c'>最近的路:</div>
            <div id='nearestRoad'></div>
            <div class='c'>最近的POI:</div>
            <div id='nearestPOI'></div>
        </div>
    </div>
    <script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.ToolBar'></script>
    <!-- UI组件库 1.0 -->
    <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
    <script type="text/javascript">
    AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
        var map = new AMap.Map('container', {
            zoom: 16,
            scrollWheel: false
        })
        var positionPicker = new PositionPicker({
            mode: 'dragMarker',
            map: map,
            iconStyle: { //自定义外观
                url: '//webapi.amap.com/ui/1.0/assets/position-picker2.png',
                ancher: [24, 40],
                size: [48, 48]
            }
        });

        positionPicker.on('success', function(positionResult) {
            document.getElementById('lnglat').innerHTML = positionResult.position;
            document.getElementById('address').innerHTML = positionResult.address;
            document.getElementById('nearestJunction').innerHTML = positionResult.nearestJunction;
            document.getElementById('nearestRoad').innerHTML = positionResult.nearestRoad;
            document.getElementById('nearestPOI').innerHTML = positionResult.nearestPOI;
        });
        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.addControl(new AMap.ToolBar({
            liteStyle: true
        }))
    });
    </script>
</body>

</html>
控制台
清空
返回顶部示例中心常见问题智能客服公众号
二维码