Hello Dunia


Cara paling mudah untuk mula mempelajari API Peta Baidu adalah dengan melihat contoh mudah. Kod berikut mencipta peta dengan Tiananmen sebagai pusat peta: 

<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Hello, World</title>  
<style type="text/css">  
html{height:100%}  
body{height:100%;margin:0px;padding:0px}  
#container{height:100%}  
</style>  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
</script>
</head>  
 
<body>  
<div id="container"></div> 
<script type="text/javascript"> 
var map = new BMap.Map("container");          // 创建地图实例  
var point = new BMap.Point(116.404, 39.915);  // 创建点坐标  
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别  
</script>  
</body>  
</html>

Di bawah ini kami memperkenalkan anda langkah demi langkah:

Sediakan halaman

Mengikut standard HTML, setiap dokumen HTML haruslah diisytiharkan betul Untuk jenis dokumen, kami mengesyorkan agar anda menggunakan pengisytiharan dokumen terkini yang mematuhi spesifikasi HTML5: 

<!DOCTYPE html>

Anda juga boleh memilih jenis pengisytiharan dokumen lain seperti yang diperlukan, supaya penyemak imbas akan memaparkan halaman dalam cara yang standard untuk memastikan keserasian maksimum jantina halaman. Kami tidak mengesyorkan anda menggunakan mod quirks untuk pembangunan.

Seterusnya kami menambah tag meta untuk menjadikan halaman anda lebih baik dipaparkan pada platform mudah alih. 

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

Kemudian kami tetapkan gaya supaya peta memenuhi seluruh tetingkap penyemak imbas: 

<style type="text/css">  
    html{height:100%}    
    body{height:100%;margin:0px;padding:0px}    
    #container{height:100%}    
</style>

Rujuk fail API peta Baidu Gunakan kaedah rujukan V1.4 dan versi sebelumnya:

Cre

elemen bekas Peta memerlukan elemen HTML sebagai bekas supaya ia boleh dipaparkan pada halaman. Di sini kami telah mencipta elemen div.

Ruang nama API menggunakan BMap sebagai ruang nama dan semua kelas berada di bawah ruang nama ini, seperti: BMap.Map, BMap.Control dan BMap.Overlay.

Buat contoh peta

var map = new BMap.Map("container");

Kelas Peta yang terletak di bawah ruang nama BMap mewakili peta dan contoh peta boleh dibuat melalui pengendali baharu. Parameternya boleh menjadi id elemen atau objek elemen.

Perhatikan bahawa apabila memanggil pembina ini, anda harus memastikan bahawa elemen bekas telah ditambahkan pada peta.

Buat koordinat titik

var point = new BMap.Point(116.404, 39.915);

Di sini kita menggunakan kelas Point di bawah ruang nama BMap untuk mencipta titik koordinat. Kelas Point menerangkan titik koordinat geografi, di mana 116.404 mewakili longitud dan 39.915 mewakili latitud.

Pemulaan peta

map.centerAndZoom(point, 15);

Selepas mencipta contoh peta, kita perlu memulakannya Kaedah BMap.Map.centerAndZoom() memerlukan menetapkan koordinat titik tengah dan aras peta. Peta mesti dimulakan sebelum operasi lain boleh dilakukan.

Konfigurasi dan operasi peta

Selepas peta dimulakan dan dimulakan, anda boleh berinteraksi dengannya. Penampilan dan gelagat objek peta dalam API sangat serupa dengan peta yang berinteraksi di tapak web Peta Baidu. Ia menyokong fungsi interaktif seperti menyeret tetikus, mengezum roda dan mengklik dua kali untuk mengezum masuk. Anda juga boleh mengubah suai konfigurasi untuk menukar ciri ini. Sebagai contoh, secara lalai, peta tidak menyokong operasi zum roda tetikus, kerana ini mungkin menjejaskan pengalaman pengguna seluruh halaman, tetapi jika anda ingin menggunakan roda tetikus untuk mengawal zum dalam peta, anda boleh menghubungi peta .enableScrollWheelZoom kaedah untuk mendayakannya. Pilihan konfigurasi boleh didapati dalam bahagian Kaedah Konfigurasi rujukan kelas Peta.

Selain itu, anda boleh berinteraksi dengan peta secara pengaturcaraan. Kelas Peta menyediakan beberapa kaedah untuk mengubah suai keadaan peta. Contohnya: setCenter(), panTo(), zoomTo(), dsb.

Contoh di bawah menunjukkan peta yang akan berpindah ke titik tengah baharu selepas menunggu dua saat. Kaedah panTo() akan mengalihkan peta dengan lancar ke titik tengah baharu Jika jarak pergerakan melebihi saiz kawasan peta semasa, peta akan melompat terus ke titik itu. 

var map = new BMap.Map("container");    
var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);    
window.setTimeout(function(){  
    map.panTo(new BMap.Point(116.409, 39.918));    
}, 2000);