코드 사본은 다음과 같습니다.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<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>
</head>
<바디 스타일 = "배경 :#cbe1ff">
<div>
쿼리 할 주소 : <입력 ID = "text_"유형 = "text"value = "xuzhou gupeng square"style = "margin-right : 100px;"/>
쿼리 결과 (위도 및 경도) : <input id = "result_"type = "text" />
<input type = "button"value = "query"onclick = "SearchBeystationName ();"/>
<div id = "컨테이너"
스타일 = "위치 : 절대;
마진 탑 : 30px;
너비 : 730px;
높이 : 590px;
상단 : 50;
테두리 : 1px 단단한 회색;
오버플로 : 숨겨진; ">
</div>
</div>
</body>
<script type = "text/javaScript">
var map = new bmap.map ( "컨테이너");
Map.Centerandzoom ( "Xuzhou", 12);
map.enablescrollwheelzoom (); // 스크롤 휠 활성화 휠 확대 및 출력, 기본적으로 비활성화
map.enableContinuousZoom (); // 기본적으로 비활성화 된 맵 관성 드래그 앤 드롭을 활성화합니다
map.addControl (new bmap.navigationControl ()); // 기본 줌 팬 컨트롤을 추가합니다
map.addControl (new bmap.overViewMapControl ()); // 기본 썸네일 맵 컨트롤을 추가합니다
map.addControl (new bmap.overViewMapControl ({isopen : true, 앵커 : bmap_anchor_bottom_right}); // 오른쪽 하단 코너, 열기
var localsearch = new bmap.localsearch (map);
localsearch.enableautoviewport (); // 양식 크기를 자동으로 조정할 수 있습니다
function searchBystationName () {
map.clearoverlays (); // 원래 태그를 지우십시오
var keyword = document.getElementById ( "Text _"). 값;
localsearch.sectearchcompletecallback (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 (마커);
var content = document.getElementById ( "text _"). value + "<br/> <br/> long :" + poi.point.lng + "<br/> lat :" + poi.point.lat;
var infowindow = new bmap.infowindow ( "<p style = 'font-size : 14px;'>" + content + "</p>");
Marker.addeventListener ( "클릭", function () {this.openinfowindow (Infowindow);});
// Marker.setAnimation (bmap_animation_bounce); // 애니메이션을 이겼습니다
});
localsearch.search (키워드);
}
</스크립트>
</html>
위는 모든 코드입니다. 친구는 프로젝트에서 직접 사용할 수 있습니다. 감사합니다.