The first kind of Baidu
Directly on the code:
<!DOCTYPE><HTML><Head><Metaname= "Viewport"content= "initial-scale=1.0, User-scalable=no" /><Metahttp-equiv= "Content-type"content= "text/html; CHARSET=GBK" /><title>Baidu Map</title> <styletype= "Text/css">HTML{Height:100%}Body{Height:100%;margin:0px;padding:0px}#container{Height:100%} </style> <Scriptsrc= "http://api.map.baidu.com/api?v=1.4"type= "Text/javascript"></Script></Head><Body> <inputtype= "text"ID= "CityName"value= "Fuzhou"/><inputtype= "button"onclick= "setcity ()"value= "Find" /><DivID= "Container"style= "width:1024px;height:600px;"></Div> <Scripttype= "Text/javascript"> varMap= NewBmap.map ("Container"); //Create a map in the container container with the parameter container as the div id attribute; var Point= NewBmap.point (120.2,30.25); //Create point coordinatesMap.centerandzoom (Point, -); //initialize map, set center point coordinates and map levelMap.enablescrollwheelzoom (); //activating the wheel resizing featureMap.addcontrol (NewBmap.navigationcontrol ()); //Add control: Zooms the control of the map by default in the upper-left corner;Map.addcontrol (NewBmap.maptypecontrol ()); //Add Control: Map type control, default in upper right;Map.addcontrol (NewBmap.scalecontrol ()); //Add control: The control of the map display scale, default in the lower left;Map.addcontrol (NewBmap.overviewmapcontrol ()); //Add control: The thumbnail control of the map, default to the lower right; Trafficcontrol varSearch= NewBmap.localsearch ("China", {onsearchcomplete:function(Result) {if(Search.getstatus ()==bmap_status_success) { varRes=Result.getpoi (0); var Point=Res.point; Map.centerandzoom (Point, One); }},renderoptions: {//result rendering settings,Map:map, Autoviewport:true, Selectfirstresult:true}, Oninfohtmlset:function(poi,html) {//Callout Bubble content after the creation of the callback function, with this, you can easily change the returned HTML content. //alert (html.innerhtml) }//This paragraph can not be, just to learn more in-depth application and join. }); functionsetcity () {Search.search (document.getElementById ("CityName"). Value); } search.search (document.getElementById ("CityName"). Value); </Script></Body></HTML>
The second type: Google
First introduce <script type= "Text/javascript" src= "Http://maps.googleapis.com/maps/api/js?sensor=false" ></script >
The code is as follows
JS Code
varMYLATLNG =NewGoogle.maps.LatLng (Ret.attache.json.lat, RET.ATTACHE.JSON.LNG);//full map of China maps varOptmap ={zoom:15, Center:mylatlng,streetviewcontrol:false, Maptypecontrol:true, Maptypecontroloptions: {maptypeids: [/**google.maps.maptypeid.satellite, google.maps.maptypeid.hybrid**/],//CommentPosition:google.maps.ControlPosition.TOP_LEFT},//Navigationcontrol:true,navigationcontroloptions: {style:google.maps.NavigationControlStyle.DEFAULT, Position: Google.maps.ControlPosition.LEFT},//Roadmap SatelliteMapTypeId:google.maps.MapTypeId.ROADMAP}; Map=NewGoogle.maps.Map (document.getElementById (' Container ')), Optmap); Map.setoptions ({Zoom:18,CENTER:MYLATLNG});
Html
<id= "Locationdiv"><id= " Container " style=" position:relative; width:450px; height:300px; " ></ Div > </ Div >
Javaweb using Baidu, Google Maps to locate