调用百度地图api

最新推荐文章于 2024-06-07 15:59:46 发布

六诗人

最新推荐文章于 2024-06-07 15:59:46 发布

阅读量362

点赞数

分类专栏： java

java 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

http://api.map.baidu.com/lbsapi/creatmap/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度地图引用</title>
    <script src="../js/jquery-1.83.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=QDcKjEflugNDwGcudhfyXp0GphbKgTVY"></script>
<!--    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>-->
</head>
<body>
<input type="text" id="cityName" value="淮安"/>
<input type="button" οnclick="setCity()" value="查找" />
<div id="container" style="width:600px;height:300px;"></div>

</body>
<script>
    var map = new BMap.Map("container");        //在container容器中创建一个地图,参数container为div的id属性;
    var point = new BMap.Point(120.2,30.25);    //创建点坐标
    map.centerAndZoom(point, 14);                //初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom();                //激活滚轮调整大小功能
    map.addControl(new BMap.NavigationControl());    //添加控件：缩放地图的控件，默认在左上角；
    map.addControl(new BMap.MapTypeControl());        //添加控件：地图类型控件，默认在右上方；
    map.addControl(new BMap.ScaleControl());        //添加控件：地图显示比例的控件，默认在左下方；
    map.addControl(new BMap.OverviewMapControl());  //添加控件：地图的缩略图的控件，默认在右下方； TrafficControl
    var search = new BMap.LocalSearch("中国", {
        onSearchComplete: function(result){
            if (search.getStatus() == BMAP_STATUS_SUCCESS){
                var res = result.getPoi(0);
                var point = res.point;
                map.centerAndZoom(point, 11);
            }

        },renderOptions: {  //结果呈现设置，
            map: map,
            autoViewport: true,
            selectFirstResult: true
        } ,onInfoHtmlSet:function(poi,html){
            // alert(html.innerHTML)
        }

    });

    //设置城市的函数
    function setCity(){
        search.search(document.getElementById("cityName").value);
    }
    //初始化显示的城市
    search.search(document.getElementById("cityName").value);
</script>
</html>

六诗人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
调用百度地图api

http://api.map.baidu.com/lbsapi/creatmap/index.html&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;百度地图引用&lt;/title&gt;
复制链接

扫一扫