代码如下 (填入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. 《R语言入门与实践》第六章:R 的环境系统

    前言 这一章在对象的基础之上,讲解了对象所处的环境,进一步讲了环境对对象的作用,以及如何使用环境.结构如下: 环境的定义和操作 环境的规则 制作闭包 环境 R 环境的定义 在 R 中,每一个数据对象都 ...

  2. Android屏幕适配框架-(今日头条终极适配方案)

    在Android开发中,屏幕适配是一个非常头痛的问题,因而为了去进行屏幕适配,作为程序员,是呕心沥血,历经磨难,哈哈 我们之前做屏幕适配一般都会用到一下两种方式: 第一种就是宽高限定符适配,什么是宽高 ...

  3. pip安装软件或模块时提示cannot import name 'main'

    旧的pip文件内容如下: from pip import main if __name__ == '__main__': sys.exit(main()) 修改后的文件内容: from pip imp ...

  4. C语言博客作业02——循环结构

    1.本章学习总结 1.1思维导图 1.2本章学习体会及代码量学习体会 1.2.1学习体会 本周学习了循环结构,在之前学习分支结构的时候就涉及到了循环结构中的for循环,这周的又新学了while和do- ...

  5. YOLT：将YOLO用于卫星图像目标检测

    之前作者用滑动窗口和HOG来进行船体监测,在开放水域和港湾取得了不错的成绩,但是对于不一致的复杂背景,这个方法的性能会下降.为了解决这个缺点,作者使用YOLO作为物体检测的流水线,这个方法相比于HOG ...

  6. 基于RabbitMQ rpc实现的主机管理

    要求: 文件分布: 流程图: import pika import os import socket class Server(object): def __init__(self, queuenam ...

  7. chrome google plugins

    Advanced REST client  Axure RP Extension for Chrome  Charset  Chrono下载管理器  Code Cola  CSS Sprite Gen ...

  8. JVM中的垃圾回收器及垃圾收集算法描述

    首先需要了解下JVM(Java虚拟机)中的内存分配情况: 收集器的介绍: Serial收集器:是最原始的收集器,是单线程的,实现简单,但是在后台收集垃圾的时候,其他的工作线程都会停止,直到垃圾收集线程 ...

  9. lr介绍

    ---恢复内容开始--- loadrunner是通过agent进程来监控各种协议的客户端和服务端的通信: init和end不能进行迭代,action才能迭代(参数化才有作用) init(比如说有50个 ...

  10. 总结AWS使用要点

    最近做毕业设计,要用AWS跑代码,以前只用过一次,这次踩了很多坑,记录一下.. AWS命令行管理S3 bucket AWS官方文档: http://docs.amazonaws.cn/cli/late ...