使用百度地图api查询城市地区的经纬度

来源:赵克立 分类: 其它 标签:无发布时间:2017-09-09 16:57:50浏览:243
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
温馨提示:
技术类文章有它的时效性,请留意文章更新时间以及软件的版本
更新时间:
2017-09-09 16:57:50
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>查询城市地区的经纬度</title>
    <script type="text/javascript">
    var map = null;
    function initialize(keyword) {
        map = new BMap.Map('map');
        var point = new BMap.Point(119.607568,39.940628);  // 创建点坐标
        map.centerAndZoom(point, 11);
        //mp.centerAndZoom('汝州',11);
        //mp.setCurrentCity('汝州');
        // console.log(mp.getCenter());
        //
        //添加缩放控件
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.OverviewMapControl());
        /*显示地图中心地点的坐标
        map.addEventListener("dragend", function(){
          //map.panTo(point);
          var center = map.getCenter();
          document.getElementById("info").innerHTML = "当前地图中心坐标:" + center.lng + ", " + center.lat;
        });*/
        //搜索
        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("info1").value = poi.point.lng + "," + poi.point.lat;
        });
        map.addEventListener("click", function(e) {
            var _point = e.point;
            document.getElementById("info2").value = _point.lng + "," + _point.lat;
        });
    }
    function loadScript() {
        var script = document.createElement("script");
        script.src = "http://api.map.baidu.com/api?v=2.0&ak=您的密钥&callback=initialize"; //此为v2.0版本的引用方式
        // http://api.map.baidu.com/api?v=1.4&ak=您的密钥&callback=initialize"; //此为v1.4版本及以前版本的引用方式
        document.body.appendChild(script);
    }
    window.onload = loadScript;
    </script>
</head>
<body>
先输入城市查询出大概经纬度,然后鼠标点击想要的具体位置查询详细地址经纬度:
    <div id="search" style="margin-top:10px; margin-left:10px;">城市名称:<input type="text" size="20" name="keyword" id="keyword">
        <input type="submit" value="提交" onclick="initialize(document.getElementById('keyword').value)">
    </div>
    <div id="info" style="margin-top:0px; margin-left:10px;">
        查询地址经纬度:<input type="text" id="info1"><br>
        鼠标点击经纬度:<input type="text" id="info2">
    </div>
    <div id="map" style="width:500px;height:320px"></div>
</body>
</html>



微信号:mokuyu QQ群:215861553 紧急求助须知
留下一点心意, :)
点击更换验证码
留言