百度地圖API 簡單案例

時間 2019-11-11

標籤百度地圖 api 簡單案例简体版

原文原文鏈接

1、介紹javascript

百度地圖JavaScript API是一套由JavaScript語言編寫的應用程序接口，且支持HTML5特性的地圖開發。php

您需先申請密鑰纔可以使用，請參考：http://lbsyun.baidu.com/apiconsole/key?application=keycss

參考文檔：http://developer.baidu.com/map/index.php?title=jspopularhtml

第一次寫博客。java

2、實現數據庫

一、創建地圖api

首先在頁面上引用百度的jsapp

1  <script src="http://api.map.baidu.com/api?v=2.0&ak=添你申請的密鑰" type="text/javascript"></script>

在body中添加一個塊jsp

 <div id="map"></div>

View Code

編寫js代碼，這樣瀏覽頁面後就能看到地圖了，可是地圖不能經過鼠標滑輪進行縮放，ide

1 var map = new BMap.Map("map");//地圖實例
//若是想要禁用地圖上原有的InfoWindow彈出框：var map = new BMap.Map("map", { enableMapClick: false })

2 var point = new BMap.Point(116.404, 39.915);//建立中心點座標
3 map.centerAndZoom(point, 15);//設置中心點座標和地圖級別

二、增長縮放功能

1 setTimeout(function () {
2         map.setZoom(12);//12表明地圖的級別，數字越小，顯示的範圍越大。
3     }, 2000);
4     map.enableScrollWheelZoom(true);

三、使用自定義的方式在地圖上添加座標點

 1 // 編寫自定義函數,建立標註
 2     //var marker;
 3     function addMarker(point, name) {
 4         var label = new BMap.Label(name, { offset: new BMap.Size(20, -10) });
 5         var marker = new BMap.Marker(point, {
 6             // 指定Marker的icon屬性爲Symbol
 7             icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
 8                 scale: 1.5,//圖標縮放大小
 9                 fillColor: "red",//填充顏色
10                 fillOpacity: 0.8//填充透明度
11             })
12         });//建立標註
13 
14         //單擊事件
15         marker.addEventListener("click", function () {
16             var p = marker.getPosition();//獲取座標的位置
17             alert(p.lng + "  " + p.lat);
18         });
19         map.addOverlay(marker);//將標註添加到地圖上
20         marker.setLabel(label);
21         marker.setTitle(name);
         }

四、建立座標，這裏的座標是寫死的，能夠經過獲取數據庫中的數據動態的綁定座標

1 var points = { "p1": ["116.402544", "39.914714"], "p2": ["116.380697", "39.905859"], "p3": ["116.481307", "39.950786"] };
2     for (var i in points) {
3         var point = new BMap.Point(points[i][0], points[i][1]);
4         addMarker(point, i);
5     }

五、完整的代碼以下，本人也是第一次接觸。

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="http://api.map.baidu.com/api?v=2.0&ak=密鑰" type="text/javascript"></script>
    <title>百度地圖</title>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微軟雅黑";
        }

        #map {
            width: 100%;
            height: 500px;
            margin: 0;
        }
    </style>
</head>
<body>
    <div id="map"></div>
</body>
</html>
<script>
    var map = new BMap.Map("map", { enableMapClick: false });//地圖實例
    var point = new BMap.Point(116.404, 39.915);//建立中心點座標
    map.centerAndZoom(point, 15);//設置中心點座標和地圖級別
    setTimeout(function () {
        map.setZoom(12);
    }, 2000);
    map.enableScrollWheelZoom(true);

    var points = { "p1": ["116.402544", "39.914714"], "p2": ["116.380697", "39.905859"], "p3": ["116.481307", "39.950786"] };
    for (var i in points) {
        var point = new BMap.Point(points[i][0], points[i][1]);
        addMarker(point, i);
    }

    // 編寫自定義函數,建立標註
    //var marker;
    function addMarker(point, name) {
        var label = new BMap.Label(name, { offset: new BMap.Size(20, -10) });
        var marker = new BMap.Marker(point, {
            // 指定Marker的icon屬性爲Symbol
            icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
                scale: 1.5,//圖標縮放大小
                fillColor: "red",//填充顏色
                fillOpacity: 0.8//填充透明度
            })
        });//建立標註

        //單擊事件
        marker.addEventListener("click", function () {
            var p = marker.getPosition();
            alert(p.lng + "  " + p.lat);
        });
        map.addOverlay(marker);//將標註添加到地圖上
        marker.setLabel(label);
        marker.setTitle(name);
    }

</script>

相關標籤/搜索

每日一句

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