根据百度地图JSAPI查找某个地址的经纬度坐标

来源：互联网发布：ubuntu 拷贝文件命令编辑：程序博客网时间：2024/04/26 16:49

最近做的项目中涉及到根据一个地名来查找地图上的位置，并找出最相近的一个地址的坐标，我通过一个JSAPI来实现，并标注所有相关的地址的坐标；

同时，如果未查到改地址，则在页面上手工输入一个新地址来进行查找。

其中的地址是通过PHP写进去的，如果不想使用动态写入方法的话也可以通过javascript来接收一个地址参数，并通过decodeUrI方式解析出来后，直接调用百度地图接口来搜索地图上的位置。

主要使用了 JSAPI的 LocalSearch 以及其回调方法，用的百度地图JSAPI版本为2.0

具体代码如下：

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />    <style type="text/css">        body, html{width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}        #l-map{height:800px;width:100%;float:left;}        #r-result{width:20%;}    </style>    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yoursecret"></script>    <title>拾取地址的坐标</title></head><body>    <div id="l-map"></div>    <div id="r-result">  请输入地址：    <br/>      <input type="text" id="txtKeyword" />    <br/>      <button onclick="searchAddr()">搜索</button>    </div></body></html><script type="text/javascript">    // 百度地图API功能    map = new BMap.Map("l-map");            // 创建Map实例    map.centerAndZoom("{$address}", 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 }));   //右下角，打开    local = new BMap.LocalSearch(map, {        renderOptions: {map:map,autoViewport:true,selectFirstResult:false},        pageCapacity:10    });    myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {                    offset: new BMap.Size(10, 25),                    imageOffset: new BMap.Size(0, 0 - 10 * 25)                });        var keys = new Array("{$address}");    local.setSearchCompleteCallback(function (searchResults) {            console.log(searchResults);            if (typeof(searchResults) == "undefined" ) {                alert("百度API没有搜索到该地址");                return;            }            if(searchResults.length>0) {                var searchResult = searchResults[0];            }else {                var searchResult = searchResults;            }                        console.log(searchResult);                        var contents = [];            for(var i=0; i<searchResult.getCurrentNumPois(); i++)             {                //获得需要得到的坐标                var poi = searchResult.getPoi(i);                if (!poi) {                    alert("百度API没有搜索到该地址");                }                // console.log(poi);                        //设置中心点                map.centerAndZoom(poi.point, 13);                // 创建标注，为要查询的地方对应的经纬度                var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat),{ icon: myIcon });                //alert("["+poi.point.lng+","+poi.point.lat+"]");                //在地图上添加标识                map.addOverlay(marker);                //点击标识后显示的内容                contents[i] = "你要查找的地方:【"+poi.title+"】<br/>地址："+poi.address+"<br/>经度："+poi.point.lng+"<br/>纬度："+poi.point.lat;                                marker.setTitle(contents[i]);                //添加点击事件监听                marker.addEventListener("click", makerClick);                    if (i==0) {                    var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + contents[0] + "</p>");                    marker.openInfoWindow(infoWindow);                 }                                }                    });    local.search(keys);        var makerClick = function() {        var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + this.getTitle() + "</p>");        this.openInfoWindow(infoWindow);    }    function searchAddr() {        var keys = document.getElementById("txtKeyword").value;        local.search(keys);    }</script>

具体查找出来的页面如下，比如：搜索安微黄山市黄山风景区，会出现如下的图：

阅读全文

0 0