創建.html文件；
內容為：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 5 <style type="text/css"> 6 body, html{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";} 7 #allmap{height:500px;width:100%;} 8 #r-result{width:100%; font-size:14px;} 9 </style> 10 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你自己的密鑰"></script> 11 <title>城市名定位</title> 12 </head> 13 <body> 14 <div id="allmap"></div> 15 <div id="r-result"> 16 經度: <input id="longitude" type="text" style="width:100px; margin-right:10px;" /> 17 緯度: <input id="latitude" type="text" style="width:100px; margin-right:10px;" /> 18 <input type="button" value="查詢" onclick="theLocation()" /> 19 </div> 20 </body> 21 </html> 22 <script type="text/javascript"> 23 // 百度地圖API功能 24 var map = new BMap.Map("allmap",{ 25 minZoom : 1, 26 maxZoom : 20 27 }); 28 //初始化地圖，設置坐標點在哪 29 map.centerAndZoom(new BMap.Point(117.283641,31.773978),20); 30 map.enableScrollWheelZoom(true); 31 32 //設置標注圖片 33 var icon = new BMap.Icon("car_2.png",new BMap.Size(35,30),{ 34 anchor:new BMap.Size(10,0) 35 }); 36 37 // 用經緯度設置地圖中心點 38 function theLocation(){ 39 if(document.getElementById("longitude").value != "" && document.getElementById("latitude").value != ""){ 40 map.clearOverlays(); 41 var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value); 42 var marker = new BMap.Marker((new_point),{ 43 icon:icon 44 }); 45 map.addOverlay(marker); // 將標注添加到地圖中 46 map.panTo(new_point); 47 } 48 } 49 function addpoint (x,y){ 50 map.clearOverlays(); 51 var ggPoint = new BMap.Point(x,y); 52 var marker = new BMap.Marker((ggPoint),{ 53 icon:icon 54 }); 55 //var marker = new BMap.Marker(ggPoint); 56 map.addOverlay(marker); 57 map.panTo(ggPoint); 58 } 59 60 61 </script>
QT下運行：
輸入經緯度，點擊查詢按鈕，標記為自定義的汽車圖片
