代码如下 (填入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. APP多开教程

    https://bbs.feng.com/read-htm-tid-11793134.html 本教程原创,送给有需要的人.本人就为了多开百度云盘传数据,故多开两个百度云盘,亲测一周多没毛病.微信多开 ...

  2. cef-3.2623 build on vs2013

    1. 参文"在Windows下编译Cef3.2623并加入mp3.mp4支持(附带源码包和最终DLL)"下载包 http://blog.csdn.net/zhuhongshu/ar ...

  3. zabbix报错gd、freetype、png、jpeg

    安装包位置:http://www.p-pp.cn/app/zabbix/ 1.安装freetype [root@localhost softs]# tar xf freetype-2.5.0.tar. ...

  4. PHP json_decode为什么将json字符串转成数组是对象格式？

    eg. $a='[{\"img\":\"/uploads/agency/carimgs/5/15515954778091.jpg\"},{\"img\ ...

  5. SWUST OJ(1038)

    顺序表中重复数据的删除 #include <iostream> #include <cstdlib> using namespace std; int main() { int ...

  6. DataSet结果转模型类

    引入命名空间: using System.Data; using System.Reflection; 类封装代码: public class ModelHelper { public T To< ...

  7. url路由配置以及渲染方式

    路由分配及模板渲染 路由系统 urlpatterns = [ path('admin/', admin.site.urls), path('teacher/',include('teacher.url ...

  8. 6种纯css实现loading效果

    1. <div id="loadingWrap1"> <span></span> <span></span> <s ...

  9. shell脚本学习之for循环

    1.数字循环 [root@zabbix ~]# for i in {1..10};do echo $(expr $i \* 3);done;36912151821242730 [root@zabbix ...

  10. onceAgain, 这是一个py群的群公告说明

    群规: 1. 不骚扰人 2. 不涉及娱乐政治 3. 主要就这两条 入门参考:https://book.douban.com/review/9547077/ qq群/网盘:523445644  # 加群 ...