代码如下 (填入Key值) :

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>高德地图</title>

    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>

    <script type="text/javascript"

            src="http://webapi.amap.com/maps?v=1.4.8&key=申请的key值&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>

    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

    <script type="text/javascript">

        window.onload = function () {

            //定义初始经纬度

            var mylgt = "120.185954";

            var mylat = "30.11235";

            //地图加载

            var map = new AMap.Map("container", {

                zoom: 15,    //地图缩放级别

                resizeEnable: true,

                center: [mylgt, mylat]

            });

            //定义一个标记

            var marker = new AMap.Marker({

                icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",

                position: [mylgt, mylat]

            });

            //添加标记

            marker.setMap(map);

            //为地图注册click事件获取鼠标点击出的经纬度坐标

            var clickEventListener = map.on('click', function (e) {

                document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat();

                //清空标记

                if (marker) {

                    marker.setMap(null);

                    marker = null;

                }

                //重设标记

                marker = new AMap.Marker({

                    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",

                    position: [e.lnglat.getLng(), e.lnglat.getLat()]

                });

                marker.setMap(map);

            });

            //输入地点提示

            var auto = new AMap.Autocomplete({

                input: "tipinput"

            });

            //构造地点查询类

            var placeSearch = new AMap.PlaceSearch({

                map: map

            });

            //注册监听，当选中某条记录时会触发

            AMap.event.addListener(auto, "select", select);

            function select(e) {

                placeSearch.setCity(e.poi.adcode);

                placeSearch.search(e.poi.name);  //关键字查询查询

            }

        }

    </script>

</head>

<body>

<div id="container"></div>

<div id="myPageTop">

    <table>

        <tr>

            <td>

                <label>按关键字搜索：</label>

            </td>

            <td>

                <label>左击获取经纬度：</label>

            </td>

        </tr>

        <tr>

            <td>

                <input type="text" placeholder="请输入关键字进行搜索" id="tipinput">

            </td>

            <td>

                <input type="text" readonly="true" id="lnglat">

            </td>

        </tr>

    </table>

</div>

</body>

</html>

步骤说明 :

1. 在高德地图开放平台中申请Key

2. 创建Html文件,添加引用资源 ( plugin=AMap.Autocomplete,AMap.PlaceSearch 中 AMap.Autocomplete -> 输入提示插件 , AMap.PlaceSearchPOI -> 搜索插件 )

<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.8&key=e0fa91db4ad26b3c627452db308f570e&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>

<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

3. 编写地图div与相应显示栏

<div id="container"></div>

<div id="myPageTop">

    <table>

        <tr>

            <td>

                <label>按关键字搜索：</label>

            </td>

            <td>

                <label>左击获取经纬度：</label>

            </td>

        </tr>

        <tr>

            <td>

                <input type="text" placeholder="请输入关键字进行搜索" id="tipinput">

            </td>

            <td>

                <input type="text" readonly="true" id="lnglat">

            </td>

        </tr>

    </table>

</div>

4. 为页面添加对应功能的JS代码

<script type="text/javascript">
    window.onload = function () {

        //定义初始经纬度
        var mylgt = "120.185954";
        var mylat = "30.11235";

        //地图加载
        var map = new AMap.Map("container", {
            zoom: 15,    //地图缩放级别
            resizeEnable: true,
            center: [mylgt, mylat]
        });

        //定义一个标记
        var marker = new AMap.Marker({
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            position: [mylgt, mylat]
        });

        //添加标记
        marker.setMap(map);

        //为地图注册click事件获取鼠标点击出的经纬度坐标
        var clickEventListener = map.on('click', function (e) {
            document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat();

            //清空标记
            if (marker) {
                marker.setMap(null);
                marker = null;
            }

            //重设标记
            marker = new AMap.Marker({
                icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                position: [e.lnglat.getLng(), e.lnglat.getLat()]
            });
            marker.setMap(map);
        });

        //输入地点提示
        var auto = new AMap.Autocomplete({
            input: "tipinput"
        });

        //构造地点查询类
        var placeSearch = new AMap.PlaceSearch({
            map: map
        });

        //注册监听，当选中某条记录时会触发
        AMap.event.addListener(auto, "select", select);

        function select(e) {
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name);  //关键字查询查询
        }
    }
</script>

JS高德地图应用 ---- 鼠标点击加入标记 & POI搜索的更多相关文章

  1. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  2. JS框架_(JQuery.js)高德地图api

    百度云盘 传送门 密码 :ko30 高德地图api效果 <!doctype html> <html> <head> <meta charset="u ...

  3. js高德地图手机定位

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  4. js之好看的鼠标点击-光标特效

    1.光标特效 <script src="https://blog-static.cnblogs.com/files/axqa/bubbleCursor.js">< ...

  5. 原生js及H5模拟鼠标点击拖拽

    一.原生js 1.拖拽的流程动作 鼠标按下 触发onmousedown事件 鼠标移动 触发onmousemove事件 鼠标松开 触发onmouseup事件 2.注意事项: 要防止div移出可视框,要限 ...

  6. JS高德地图计算两地之间的实际距离

    这个是通过导航的方式来获取两地之间的实际距离,和消耗的时间(key值自己去申请哈) <!doctype html> <html> <head> <meta c ...

  7. 百度地图Api进阶教程-用户自定义数据(标记和搜索)7.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 工作当中实际运用（3）——js原生实现鼠标点击弹出div层 在点击隐藏

    function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...

  9. JS 百度地图导航

    上一篇文章中我们就简单的学习了HTML5 地理定位,那么今天告诉大家我在项目中遇到的一个问题吧,就是怎么实现点击一个按钮就可以调到百度地图,并且获取到你当前的位置,并且导航到指定的地方去. 不想看步骤 ...

随机推荐

  1. 4 - BFS & Topological Algorithm

    615. Course Schedule https://www.lintcode.com/problem/course-schedule/description?_from=ladder&& ...

  2. UNDO -- Concept

     Undo data Records of the actions of transactions, primarily before they are committed. The database ...

  3. Nginx缓存

    一.基于proxy_cache的缓存 worker_processes ; events { worker_connections ; } http { include mime.types; def ...

  4. Eclipse+Maven环境下java.lang.OutOfMemoryError: PermGen space及其解决方法

    转自  https://blog.csdn.net/qdgengwenfei/article/details/71455432 java.lang.OutOfMemoryError: PermGen ...

  5. redist命令操作（二）--哈希Hash，列表List

    1.Redis 哈希(Hash) 参考菜鸟教程:http://www.runoob.com/redis/redis-hashes.html Redis hash 是一个string类型的field和v ...

  6. AutoCAD批量导出点坐标

    需求背景: 需要批量导出DWG文件中的散点树的位置信息,以Excel文件格式存储. 实现方法: 在AutoCAD2012打开dwg文件,点击“插入”选项卡中的“提取数据”工具(或输入DATAEXTRA ...

  7. min_25筛题目总结

    看了网上众多博客后,我才发现,实现min_25只有脑子,没有代码. 当然可能是我太ruo了. min_25是一种想法,不是算法. 不要尝试套模板,因为很多题目并没有什么用. 最重要的一点,g不要看成是 ...

  8. [数]数学系列预习->补水题ver.

    ---恢复内容开始--- 话说要学反演了,contest一题都搞不定,整理题目暂且搁置,数学笨蛋来学一下数学_(:з」∠)_ ---恢复内容结束--- 是的,预习看了半天教学,没有整理,做题又都不会, ...

  9. 基于MAVEN使用IDEA创建dubbo入门项目图文教程

    花了很长时间没有找到一个很详细的图文教程来学习dubbo入门框架,故记录下来. 一: 项目工程目录 简单介绍项目目录结构: 二: 创建父工程 具体操作步骤: 1,打开IDEA,按下面步骤来 File- ...

  10. elment重置表格行高，hover效果

    来源网络,做个笔记.表头行高.el-table__header tr, .el-table__header th { padding: 0; height: 50px; }表体行高 .el-table ...