百度地圖 ver2.0 api

時間 2019-11-12

標籤百度地圖 ver2.0 ver api 简体版

原文原文鏈接

百度地圖JavaScript API是一套由JavaScript語言編寫的應用程序接口，可幫助您在網站中構建功能豐富、交互性強的地圖應用，支持PC端和移動端基於瀏覽器的地圖應用開發，且支持HTML5特性的地圖開發。另外，2014年1月9日，極速版JavaScript API全新上線，此版本專門針對簡單功能的移動端瀏覽器開發提供。php

該套API免費對外開放。自v1.5版本起，您需先申請密鑰（ak）纔可以使用，接口（除發送短信功能外）無使用次數限制。html

　百度地圖官網首頁：http://lbsyun.baidu.com/api

ak申請地址： http://lbsyun.baidu.com/apiconsole/key?application=key瀏覽器

api 文檔下載：http://lbsyun.baidu.com/index.php?title=jspopular/js-downloadapp

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
    <title>百度地圖</title>
    <style>
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微軟雅黑";
        }

        #container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="container"></div>
<script src="js/map.js"></script>
</body>
</html>

<script>
　　function mapCallback() {

    var map = new BMap.Map("container");
    var point = new BMap.Point(108.92713066909194, 34.228349244048696);//設置座標點
    map.addControl(new BMap.MapTypeControl());
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.ScaleControl());
    map.addControl(new BMap.OverviewMapControl());
    map.addControl(new BMap.MapTypeControl());
    map.enableScrollWheelZoom(true);
    var icon = new BMap.Icon('img/loca.svg', new BMap.Size(50, 50), {//添加圖標
        anchor: new BMap.Size(20, 20)
    });
    var mkr = new BMap.Marker(new BMap.Point(108.92713066909194, 34.228349244048696), {//中心點
        icon: icon
    });
    var opts = {
        width: 200,     // 信息窗口寬度
        height: 100,     // 信息窗口高度
        title: "Hello", // 信息窗口標題
        enableMessage: true,//設置容許信息窗發送短息
        message: "這個消息爲啥不會顯示。。。"
    };
    var infoWindow = new BMap.InfoWindow("世界這麼大，我想處處走走~", opts);  // 建立信息窗口對象
    map.addEventListener('touchstart', function (e) {//輸出經緯度座標
        var newOne = new BMap.Point(e.point.lng + "," + e.point.lat);
        console.log(newOne);
        mkr.openInfoWindow(infoWindow, point); //開啓信息窗口
    });
//        var local = new BMap.LocalSearch(map, {
//            renderOptions:{
//                map: map,
//                autoViewport:true
//            }
//        });
//        local.searchNearby("小吃","門前");
    map.centerAndZoom(point, 17);
    map.addOverlay(mkr);
}
function loadScript() {//map ver2.0
    var script = document.createElement('script');
    script.src = "http://api.map.baidu.com/api?v=2.0&ak=CvyXEc7z4BO6IYkTfHU4POsluYKkAFdV&callback=mapCallback";
    document.body.appendChild(script);
}
window.onload = loadScript();

</script>

效果圖：

相關標籤/搜索

每日一句

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