zoukankan      html  css  js  c++  java
  • 利用百度地图实现搜索定位功能

    1.html部分

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>搜索定位</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <style type="text/css">
    
            #map {
                 800px;
                height: 800px;
             }
        </style>
        <script src="jquery.js"></script>
        <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你申请的ak码"></script>
    </head>
    <body>
        <div id="map">
    
        </div>
        <input type="text" id="address">
        <button id="btn">搜索</button>
    </body>
    </html>
    

    2.js部分

    代码都有注释,就不多说了

    // 百度地图API功能
    var map = new BMap.Map("map");
    map.centerAndZoom("杭州", 11);
    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角,添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  //左上角,添加默认缩放平移控件
    
    // 标尺控件
    map.addControl(top_left_control);
    map.addControl(top_left_navigation);
    
    //定位
    function setPlace(value) {
        var local, point, marker = null;
        local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: fn
        });
    
        local.search(value);
    
        function fn() {
            //如果搜索的有结果
            if(local.getResults() != undefined) {
                map.clearOverlays(); //清除地图上所有覆盖物
                if(local.getResults().getPoi(0)) {
                    point = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
                    map.centerAndZoom(point, 18);
                    marker = new BMap.Marker(point); // 创建标注
                    map.addOverlay(marker); // 将标注添加到地图中
                    marker.enableDragging(); // 可拖拽
                    alert("当前定位经度:"+point.lng+"纬度:"+point.lat);
                } else {
                    alert("未匹配到地点!可拖动地图上的红色图标到精确位置");
                }
            } else {
                alert("未找到搜索结果")
            }
        }
    }
    // 按钮事件
    $("#btn").click(function(){
        setPlace($("#address").val());
    });
    

    3.效果  

  • 相关阅读:
    Linux Core Dump
    ODP.NET Managed正式推出
    获取EditText的光标位置
    (Java实现) 洛谷 P1603 斯诺登的密码
    (Java实现) 洛谷 P1603 斯诺登的密码
    (Java实现) 洛谷 P1036 选数
    (Java实现) 洛谷 P1036 选数
    (Java实现) 洛谷 P1012 拼数
    (Java实现) 洛谷 P1012 拼数
    (Java实现) 洛谷 P1028 数的计算
  • 原文地址:https://www.cnblogs.com/LandMine/p/6490078.html
Copyright © 2011-2022 走看看