基於百度地圖的 JavaScript API示例學習

時間 2019-11-24

標籤基於百度地圖 javascript api 示例學習欄目 JavaScript 简体版

原文原文鏈接

基於百度地圖的 JS API 示例學習

最近在作和地圖相關的項目，須要在 C# 編寫的桌面應用中嵌入在線地圖。我首先嚐試了百度地圖提供的 JavaScript API，大體瞭解它的實現過程，這是一個小的示例。javascript

首先要去百度開發者平臺申請一個 Key，實際上根據個人我的體驗，不用密鑰也能夠使用，只不過是 1.4 版。目前最新是 2.0。開始的建立地圖都很簡單，還能夠添加標註點以及鼠標點擊事件。css

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<!-- 百度地圖v1.4可不用密鑰 src="http://api.map.baidu.com/api?v=1.4"-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你本身的密鑰"></script> 
<title>百度地圖的Hello, World</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("allmap");            // 建立Map實例
var point = new BMap.Point(108.771672, 34.039175);    // 建立點座標
map.centerAndZoom(point,18);                     // 初始化地圖,設置中心點座標和地圖級別。
map.enableScrollWheelZoom();                            //啓用滾輪放大縮小


var marker1 = new BMap.Marker(new BMap.Point(108.771672, 34.039175));  // 建立標註
map.addOverlay(marker1);              // 將標註添加到地圖中
marker1.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫
var infoWindow1 = new BMap.InfoWindow("協同感知中心地點");              //給標註添加信息框
//給mark添加鼠標單擊事件
marker1.addEventListener("click", function () { this.openInfoWindow(infoWindow1); });

//編寫自定義函數添加工做者標註
function addMarker(point, i) {
    //百度默認的標註是個紅色氣球，能夠給它換圖標：
    var myIcon = new BMap.Icon("./red_dot.png", new BMap.Size(20, 20), { anchor: new BMap.Size(10, 10) });//本身要添加的路徑
    var marker2 = new BMap.Marker(point, { icon: myIcon });  // 建立標註
    map.addOverlay(marker2);              // 將標註添加到地圖中

    //最後爲信息框加入點擊鼠標事件：
    var infoWindow2 = new BMap.InfoWindow("<p style='font-size:12px;'>工做者"+ i +"</p>");
    marker2.addEventListener("click", function () { this.openInfoWindow(infoWindow2); });
}

// 隨機向地圖添加25個標註
var bounds = map.getBounds();
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
var lngSpan = Math.abs(sw.lng - ne.lng);
var latSpan = Math.abs(ne.lat - sw.lat);
for (var i = 0; i < 15; i++) {
    var point = new BMap.Point(sw.lng + lngSpan * (Math.random() ), ne.lat - latSpan * (Math.random() ));
    addMarker(point, i);
}

</script>

我遇到的一個小問題是，更換了標註點的圖標以後，放大縮小地圖會致使標記點漂移。查了官方類的說明，可是很簡略。我屢次測試以後才明白問題出如今這兩個參數上：html

var myIcon = new BMap.Icon("./red_dot.png", new BMap.Size(20, 20), { anchor: new BMap.Size(10, 10) });

這裏{ anchor: new BMap.Size(10, 10) }能夠調整設置到圖標的中心，這樣再去放大縮小地圖就不會出現圖標移位的情況。java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。