JS地图搜索位置

直接复制就可以使用,输入框输入地址点击查询,查询结果地图定位查询位置,显示查询位置经纬度
<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 + "

经度:"
+ poi.point.lng + "
纬度:"
+ poi.point.lat;var infoWindow = new BMap.InfoWindow("

" + content + "

"
);marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); });marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画});localSearch.search(keyword);} </script> </html>


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部