代码如下 (填入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. 多功能版vue日历控件

    下载地址:https://pan.baidu.com/s/1nvpx0tB5cIvvqHuApz_MpQ 之前写了一个简单的vue日历控件:https://www.cnblogs.com/mrzhu/ ...

  2. css伪类选择符

    1):link/:visited/:hover/:active (爱恨原则 love/hate)2):first-child/:last-child/:only-child/:nth-child(n) ...

  3. PHP反射学习总结

    反射(Reflection) PHP的反射机制提供了一套反射API,用来访问和使用类.方法.属性.参数和注释等,比如可以通过一个对象知道这个对象所属的类,这个类包含哪些方法,这些方法需要传入什么参数, ...

  4. vue-计算属性和侦听器

    1.计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> { ...

  5. JS(JAVASCRIPT)

    2018-08-17 * JAVASCRIPT(JavaScript简写js,文件的后缀名也是 demo.js)(*****) * javascript的简介 * js是基于对象和事件驱动的脚本语言, ...

  6. 框架-thrift-zookeeper-kafka

    Apache Thrift 是 Facebook 实现的一种高效的.支持多种编程语言的远程服务调用的框架. 目前流行的服务调用方式有很多种,例如基于 SOAP 消息格式的 Web Service,基于 ...

  7. styled-components 背后的魔法

    styled-components 定义组件的风格为 const Button = styled.button` background-color: papayawhip; border-radius ...

  8. selenium操作日历控件

    日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如何解决日历控件为readonly属性的问题. 基本思路:先用js去掉 ...

  9. awk shell

    作业一:整理博客,内容包含awk.变量.运算符.if多分支 awk   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 2 ...

  10. Java final类&所有构造方法均为private的类（类型说明符&访问控制符）

    1. final是类型说明符,表示关闭继承,即final类不能有子类: 但final类可能可以在类外创建对象(即final类的构造方法可以不是private型): 在同一包中时,可以在任何另外一个类中 ...