代码如下 (填入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. python之做一个简易的翻译器(一)

    平时经常在网上翻译一些单词,突发奇想,可不可以直接调某些免费翻译网站的接口呢?然后做一个图形界面的翻译小工具?下面开始实践 1.先找一下有哪些免费翻译的接口 百度了一下关键字“免费翻译接口”,然后找到 ...

  2. 20175317 《Java程序设计》第七周学习总结

    20175317 <Java程序设计>第七周学习总结 教材学习内容总结 第七周我学习了教材第八章的内容,学习了许多常用实用类,有以下内容: String类 1. 如何构造String对象 ...

  3. pta

    一:实验代码 include <stdio.h> char theValue[10] = { 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j ...

  4. cookie,session,fileter,liscen

    会话技术: 会话:一次会话中发生多次请求和响应 一次会话:从浏览器的打开到关闭 功能:在会话的过程中 ,可以共享数据 cookie:客户端的会话技术session:服务端的会话技术 Cookie:小饼 ...

  5. 关于lower_bound( )和upper_bound( )的常见用法

    lower_bound( )和upper_bound( )都是利用二分查找的方法在一个排好序的数组中进行查找的. 在从小到大的排序数组中, lower_bound( begin,end,num):从数 ...

  6. QMessageBox对话框

    infoBox = QMessageBox() infoBox.setIcon(QMessageBox.Question) infoBox.setWindowTitle("初始化失败&quo ...

  7. Matlab-7:偏微分方程数值解法-李荣华-有限元解导数边界值的常微分（Galerkin方法）

    p47.(实习题-李荣华)用线性元求下列边值问题的数值解 tic; % this method is transform from Galerkin method %also call it as f ...

  8. Fatal error: Uncaught Error: Call to undefined function curl_init()

    系统:win7 对于此错误首先检查php_curl扩展是否开启 , extension=curl  #注意去掉前面的分号 然后检查php\ext下是否有php_curl.dll 文件(默认都有) ph ...

  9. .Net mvc 上传多文件

    .net mvc 上传多文件有很多种方式,我的方法只是其中一种, 仅供参考,我主要是注重参数传递的过程,后面文件保存的地方省略.. 调试环境 vs2017 控制器代码: [HttpPost] publ ...

  10. js的一些常用方法

    1.判断是否为一个空对象 let a={}; console.log(Object.keys(arr).length==0);//true 2.从数组中取出重复的数据 var arr = [" ...