手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >使用百度地图api实现根据地址查询经纬度
使用百度地图api实现根据地址查询经纬度
摘要:复制代码代码如下:根据地址查询经纬度要查询的地址:查询结果(经纬度):varmap=newBMap.Map("container");map...

复制代码 代码如下:

<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"></script>

</head>

<body>

<div>

要查询的地址:<input id="text_" type="text" value="徐州古彭广场"/>

查询结果(经纬度):<input id="result_" type="text" />

<input type="button" value="查询"/>

<div id="container"

>

</div>

</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>" + content + "</p>");

marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); });

// marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

});

localSearch.search(keyword);

}

</script>

</html>

以上就是代码的全部内容了,小伙伴们可以直接使用在项目中哦,不用跟我说谢谢,请叫我雷锋大大~

【使用百度地图api实现根据地址查询经纬度】相关文章:

JS函数实现鼠标指向图片后显示大图代码

原生javascript实现解析XML文档与字符串

利用js实现禁止复制文本信息

javascript中CheckBox全选终极方案

多种js图片预加载实现方式分享

jQuery使用zTree插件实现树形菜单和异步加载

收集整理的四个方向的滚动

jQuery结合ajax实现动态加载文本内容

探索angularjs+requirejs全面实现按需加载的套路

灵活的理解JavaScript中的this指向

精品推荐
分类导航