html 页面增加百度地图功能

最新推荐文章于 2024-05-16 01:36:30 发布

the_sea_of_knife

最新推荐文章于 2024-05-16 01:36:30 发布

阅读量346

点赞数 1

文章标签： html页面百度地图引用

原文链接：www.baidu.com

版权

html 页面增加百度地图功能

<!DOCTYPE>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <title>百度地图</title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
    <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
</head>
<body>


<input type="text" id="cityName" value="湖北"/>
<input type="button" onclick="setCity()" value="查找" />
<div id="container" style="width:1024px;height:600px;"></div>


<script type="text/javascript">
    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){//标注气泡内容创建后的回调函数，有了这个，可以简单的改一下返回的html内容了。
            // alert(html.innerHTML)
        }//这一段可以不要，只不过是为学习更深层次应用而加入的。
    });

    function setCity(){
        search.search(document.getElementById("cityName").value);
    }

    search.search(document.getElementById("cityName").value);


</script>
</body>
</html>

只需要简单的把这段代码,放到html页面即可

the_sea_of_knife

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 页面增加百度地图功能

html 页面增加百度地图功能<!DOCTYPE><html><head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; c...
复制链接

扫一扫