• 百度地图 ver2.0 api


       百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。另外,2014年1月9日,极速版JavaScript API全新上线,此版本专门针对简单功能的移动端浏览器开发提供。

       该套API免费对外开放。自v1.5版本起,您需先申请密钥(ak)才可使用,接口(除发送短信功能外)无使用次数限制。

     百度地图官网首页:http://lbsyun.baidu.com/

       ak申请地址: http://lbsyun.baidu.com/apiconsole/key?application=key

       api 文档下载:http://lbsyun.baidu.com/index.php?title=jspopular/js-download

    <!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 {
    100%;
    height: 100%;
    margin: 0;
    font-family: "微软雅黑";
    }

    #container {
    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 = {
    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>

    效果图:

     
  • 相关阅读:
    动态规划____类数字三角形
    动态规划____编辑距离
    123
    pair queue____多源图广搜
    JAVA练习01
    leetcode — binary-tree-maximum-path-sum
    leetcode — best-time-to-buy-and-sell-stock-iii
    leetcode — best-time-to-buy-and-sell-stock-ii
    leetcode — best-time-to-buy-and-sell-stock
    leetcode — triangle
  • 原文地址:https://www.cnblogs.com/zh719588366/p/6897101.html
Copyright © 2020-2023  润新知