百度地图JavaScript API经纬度查询-MAP

简介: 百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ:搜索: 百度地图Demo-更多技术分享请看博客:http://blog.

百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ:


搜索:<input type="text" size="20" name="keyword" id="keyword" /> <input type="submit" value="提交" onclick="MblogDotccMap(document.getElementById('keyword').value)" />

<!--
更多技术分享请看博客:http://blog.csdn.net/fuyifang
-->
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>百度地图Demo-更多技术分享请看博客:http://blog.csdn.net/fuyifang</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body>
    <div style="width: 520px; height: 340px; border: 1px solid gray" id="container">
    </div>
</body>
</html>
<script type="text/javascript">

    var map = new BMap.Map("container"); //初始化地图

    var opts = { type: BMAP_NAVIGATION_CONTROL_LARGE }; //初始化地图控件
    map.addControl(new BMap.NavigationControl(opts));

    var point = new BMap.Point(121.48, 31.22); //初始化地图中心点
    var marker = new BMap.Marker(point); //初始化地图标记
    marker.enableDragging(); //标记开启拖拽

    var gc = new BMap.Geocoder();
    //添加标记拖拽监听
    marker.addEventListener("dragend", function (e) {
        //获取地址信息
        gc.getLocation(e.point, function (rs) {
            showLocationInfo(e.point, rs);
        });
    });

    //添加标记点击监听
    marker.addEventListener("click", function (e) {
        gc.getLocation(e.point, function (rs) {
            showLocationInfo(e.point, rs);
        });
    });

    map.centerAndZoom(point, 15); //设置中心点坐标和地图级别
    map.addOverlay(marker); //将标记添加到地图中

    //显示地址信息窗口
    function showLocationInfo(pt, rs) {
        var opts = {
            width: 250, //信息窗口宽度
            height: 100, //信息窗口高度
            title: "" //信息窗口标题
        }

        var addComp = rs.addressComponents;
        var addr = "当前位置:" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br />";
        addr += "纬度: " + pt.lat + ", " + "经度:" + pt.lng;
        //alert(addr);

        var infoWindow = new BMap.InfoWindow(addr, opts); //创建信息窗口对象
        marker.openInfoWindow(infoWindow);
    }
    function MblogDotccMap(keyword) {
        //搜索
        var local = new BMap.LocalSearch(map,
         { renderOptions: { map: map, panel: "results_info" }
          }
         );

        map.panBy(point);

        local.search(keyword);

        local.getResults()

        local.setSearchCompleteCallback(function (searchResult) {
            var poi = searchResult.getPoi(0);
            //alert(poi.point.lng+"   "+poi.point.lat);
            //document.getElementById("info").innerHTML = "<strong>" + keyword + "</strong>" + "坐标:" + poi.point.lng + "," + poi.point.lat;
        });

    }



</script>
<div id="results_info"></div>
搜索:<input type="text" size="20" name="keyword" id="keyword" /> <input type="submit" value="提交" onclick="MblogDotccMap(document.getElementById('keyword').value)" />
<!--
更多技术分享请看博客:http://blog.csdn.net/fuyifang
-->

目录
相关文章
|
12天前
|
JavaScript 前端开发 索引
问js的forEach和map的区别
JavaScript中的`forEach`和`map`都是数组迭代方法。`forEach`遍历数组但不修改原数组,无返回值;它接受回调函数处理元素。`map`则遍历数组并返回新数组,新数组元素为回调函数处理后的结果。两者都接收元素、索引和数组作为回调函数参数。
18 7
|
23天前
|
安全 API 持续交付
要利用阿里云控制API查询您的阿里云资源
【2月更文挑战第33天】要利用阿里云控制API查询您的阿里云资源
17 3
|
29天前
|
JavaScript 前端开发 API
常用JavaScript 数组 API大全
常用JavaScript 数组 API大全
32 0
|
1月前
|
JavaScript 前端开发
解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
17 1
|
1月前
|
缓存 API 定位技术
使用Python调用百度地图API实现地址查询
使用Python调用百度地图API实现地址查询
88 0
|
1月前
|
API
egg.js 24.2写第一个api接口
egg.js 24.2写第一个api接口
71 0
|
2月前
|
Web App开发 JavaScript NoSQL
深入浅出:构建基于Node.js的RESTful API
在当今快速发展的互联网时代,RESTful API已成为前后端分离架构中不可或缺的一部分。本文旨在为初学者和中级开发人员提供一个清晰、简洁的指南,详细介绍如何使用Node.js构建一个高效、可维护的RESTful API。通过结合实际案例,本文将从API设计理念出发,深入讲解如何利用Express框架及MongoDB数据库实现API的增删改查功能,同时探讨如何通过JWT进行安全认证,确保数据传输的安全性。此外,文章还将简要介绍如何使用Swagger生成API文档,使得API的测试和维护更加便捷。无论你是希望提升现有项目的API设计,还是想从零开始构建一个新项目,本文都将为你提供一条清晰的道路
|
23天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可为任意类型,有序且支持get、set、has、delete操作;Set存储唯一值,提供add、delete、has方法。两者皆可迭代。示例展示了Map和Set的基本用法,如添加、查询、删除元素。
13 2
|
29天前
|
JavaScript 前端开发 API
JavaScript循环遍历常用的7种方法以及常用的数组 API
JavaScript循环遍历常用的7种方法以及常用的数组 API
34 0
|
1月前
|
自然语言处理 API 语音技术
Python加百度语音API实现文字转语音功能
Python加百度语音API实现文字转语音功能
50 0