基于高德JSAPI的H5选址组件

以下是一个基于高德JSAPI创建H5选址组件的示例代码：




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>H5选址组件示例</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德API密钥"></script>
</head>
<body>
    <div id="container" style="width:600px;height:400px;"></div>
    <script>
        // 初始化地图
        var map = new AMap.Map('container', {
            zoom: 11, // 缩放级别
            center: [116.397428, 39.90923] // 中心点坐标
        });
 
        // 创建地图选址组件
        var placeSearch = new AMap.PlaceSearch({
            map: map, // 指定搜索结果展示的地图
            panel: 'tipList' // 结果列表将展示在此容器中
        });
 
        // 搜索框的DOM元素
        var inp = document.createElement('input');
        inp.id = 'tipInput';
        inp.type = 'text';
        inp.placeholder = '请输入地点';
        map.plugins(['AMap.PlaceSearch'], function() {
            // 创建Autocomplete实例
            var autoOptions = {
                input: 'tipInput'
            };
            autocomplete = new AMap.Autocomplete(autoOptions);
 
            // 监听输入框的keydown事件
            AMap.event.addListener(autocomplete, 'select', function(e) {
                // 当选中某条记录时会触发
                placeSearch.search(e.poi.name);
            });
        });
 
        // 在地图上添加搜索输入框
        map.addControl(inp);
 
        // 为地图添加点击事件，获取点击位置的经纬度
        map.on('click', function(e) {
            var lnglat = e.lnglat;
            placeSearch.searchFromLocation(lnglat, '针对位置的搜索');
        });
    </script>
</body>
</html>

在这个示例中，我们首先引入了高德地图JSAPI，并初始化了一个地图实例。然后，我们创建了一个地图选址组件PlaceSearch，并将其绑定到地图上。我们还创建了一个搜索框，用户可以在其中输入地址来搜索，搜索结果会直接在地图上显示。最后，我们为地图添加了点击事件，当用户在地图上点击时，我们会使用点击位置的经纬度来进行搜索。

基于高德JSAPI的H5选址组件

评论已关闭

推荐阅读