JS地图搜索位置

最新推荐文章于 2023-10-17 20:49:42 发布

CBDLL

最新推荐文章于 2023-10-17 20:49:42 发布

阅读量1.4k

点赞数 1

分类专栏： JavaScript 文章标签： JS地图

本文链接：https://blog.csdn.net/CB_1213/article/details/86639948

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

直接复制就可以使用，输入框输入地址点击查询，查询结果地图定位查询位置，显示查询位置经纬度

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>***</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?ak=PlhFWpA02aoURjAOpnWcRGqw7AI8EEyO&v=2.0&services=false"></script>
</head>
<body>
    <div style="width:730px;margin:auto;">   
        <p style="font-family:'楷体';">
            <b>要查询的地址：</b><input id="text_" type="text" value="" style="margin:0;padding:10px 0;border:1px solid rgb(180, 180, 180);border-radius:8px;width:250px;height:10px;font-size:16px;text-align:center;"/>
            <input type="button" value="查询" onclick="searchByStationName();" style="width:85px;height:23px;border-color:#ccc;border-radius:25px;"/>
        </p> 
        <p style="font-family:'楷体';">查询结果(经纬度)：<input id="result_" type="text" style="border:0;" /></p>
        <center>
        <div id="container" 
            style="position: absolute;margin-top:30px;width:60%;height:80%;top:80;border: 1px solid gray;overflow:hidden;">
        </div>
        </center>
    </div>
</body>
<script type="text/javascript">
    var map = new BMap.Map("container");
    map.centerAndZoom("广州市", 12);
    map.enableScrollWheelZoom();
    map.enableContinuousZoom();
 
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.OverviewMapControl());
    map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));
 
    var localSearch = new BMap.LocalSearch(map);
    localSearch.enableAutoViewport();
    function searchByStationName() {
        map.clearOverlays();
        var keyword = document.getElementById("text_").value;
        localSearch.setSearchCompleteCallback(function (searchResult) {
            var poi = searchResult.getPoi(0);
            document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat;
            map.centerAndZoom(poi.point, 13);
            var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));
            map.addOverlay(marker);
            var content = document.getElementById("text_").value + "<br/><br/>经度：" + poi.point.lng + "<br/>纬度：" + poi.point.lat;
            var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
            marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); });
             marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        });
        localSearch.search(keyword);
    }
</script>
</html>

CBDLL

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS地图搜索位置

直接复制就可以使用，输入框输入地址点击查询，查询结果地图定位查询位置，显示查询位置经纬度&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt; &lt;title&gt;***&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text
复制链接

扫一扫