<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";} #allmap{height:500px;width:100%;} #r-result{width:100%; font-size:14px;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script> <title>城市名定位</title> </head> <body> <div id="allmap"></div> <div id="r-result"> 經度: <input id="longitude" type="text" style="width:100px; margin-right:10px;" /> 緯度: <input id="latitude" type="text" style="width:100px; margin-right:10px;" /> <input type="button" value="查詢" οnclick="theLocation()" /> </div> </body> </html> <script type="text/javascript"> // 百度地圖API功能 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.331398,39.897445),11); map.enableScrollWheelZoom(true); // 用經緯度設置地圖中心點 function theLocation(){ if(document.getElementById("longitude").value != "" && document.getElementById("latitude").value != ""){ map.clearOverlays(); var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value); var marker = new BMap.Marker(new_point); // 創建標注 map.addOverlay(marker); // 將標注添加到地圖中 map.panTo(new_point); } } </script>
來自微信公眾號:編程社
程序員日常進階寶典，歡迎關注！