need
Real-time positioning based on latitude and longitude
Overlay icon modified to custom
Click to pop up basic information
code show as below
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Query latitude and longitude by address</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bkrW4GcM8ahZ767OmpkkQhOyQhy4CpFp"></script> </head> <body style="background:#CBE1FF"> <div style="width:730px;margin:auto;"> Address to query: <input id="text_" type="text" value="Shanghai" style="margin-right:100px;"/> Query results (latitude and longitude): <input id="result_" type="text" /> <input type="button" value="查询" onclick="searchByStationName();"/> <div id="container" style="position: absolute; margin-top:30px; width: 730px; height: 590px; top: 50px; border: 1px solid gray; overflow:hidden;"> </div> </div> </body> <script type="text/javascript"> var map = new BMap.Map("container"); map.centerAndZoom("Ningbo", 12); map.enableScrollWheelZoom(); //Enable scroll wheel zoom in and out, disabled by default map.enableContinuousZoom(); //Enable map inertial dragging, disabled by default map.addControl(new BMap.NavigationControl()); //Add default zoom pan control map.addControl(new BMap.OverviewMapControl()); //Add default thumbnail map control map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //Lower right corner, open var localSearch = new BMap.LocalSearch(map); localSearch.enableAutoViewport(); //Allow automatic form resizing function searchByStationName() { map.clearOverlays();//Clear the original annotation 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 myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300,157)); var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat),{icon:myIcon}); // Create a label for the latitude and longitude corresponding to the place to be queried map.addOverlay(marker); var content = document.getElementById("text_").value + "<br/><br/>经度:" + poi.point.lng + "<br/>纬度:" + poi.point.lat; var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>"); marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); }); // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //Bounce animation }); //var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300,157)); //var marker2 = new BMap.Marker(pt,{icon:myIcon}); // create a marker // map.addOverlay(marker2); // add the marker to the map localSearch.search(keyword); } </script> </html>