百度地图的插入

最新推荐文章于 2023-02-16 23:49:48 发布

喝茶一族

最新推荐文章于 2023-02-16 23:49:48 发布

阅读量212

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/weixin_44259829/article/details/109513806

版权


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Simple Map</title>
    <style type="text/css">
        body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        p{margin-left:5px; font-size:14px;}
        * {
            margin: 0px 0px;
            padding: 0 0;
        }

        input {
            width: 300px;
            height: 25px;
            border-radius: 5px;
            outline:medium;
            border-color: black;
            margin-bottom: 50px;
        }
        #xbgw {
            width: 300px;
            margin: auto;
        }
        #container {
            height: 100%
        }
    </style>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=6PVV6WP9bLyvP8Gs23ZW2kQ0Blw2Fwvt"></script>
</head>
<body>
<div id="content" class="content" style="width: 600px;display: inline-block">
    <div style="width:600px;height:500px;border:0px solid gray" id="container"></div>
    <p id="aa"></p>
</div>
<div id="xbgw" style="display: inline-block;">

    <p>详细地址：</p>
    <input type="text" id="keyword" onkeydown="search()">

</div>



</body>
<script type="text/javascript">
    //创建Map实例
    var map = new BMap.Map("container");
    var point = new BMap.Point(118.060576,36.842432);
    var geoc = new BMap.Geocoder();
    map.centerAndZoom(point,15);
    //添加鼠标滚动缩放
    map.enableScrollWheelZoom();

    //添加缩略图控件
    map.addControl(new BMap.OverviewMapControl({isOpen:false,anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));
    //添加缩放平移控件
    map.addControl(new BMap.NavigationControl());
    //添加比例尺控件
    map.addControl(new BMap.ScaleControl());
    //添加地图类型控件
    //map.addControl(new BMap.MapTypeControl());

    //设置标注的图标
    var icon = new BMap.Icon("img/icon.jpg",new BMap.Size(100,100));
    //设置标注的经纬度
    var marker = new BMap.Marker(new BMap.Point(118.056156,36.840988),{icon:icon});
    //把标注添加到地图上
    map.addOverlay(marker);
    var content = "<table>";
    content = content + "<tr><td> 编号：001</td></tr>";
    content = content + "<tr><td> 地点：淄博市张店区</td></tr>";
    content = content + "<tr><td> 时间：2014-09-26</td></tr>";
    content += "</table>";
    var infowindow = new BMap.InfoWindow(content);
    marker.addEventListener("click",function(){
        this.openInfoWindow(infowindow);
    });

    //点击地图，获取经纬度坐标
    map.addEventListener("click",function(e){
        document.getElementById("aa").innerHTML = "经度坐标："+e.point.lng+" &nbsp;纬度坐标："+e.point.lat;
        geoc.getLocation(e.point, function (rs) {
            var addComp = rs.addressComponents;
            var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
            document.getElementById("keyword").value=address
        });

    });

    //关键字搜索
    function search(){
        var keyword = document.getElementById("keyword").value;
        var local = new BMap.LocalSearch(map, {
            renderOptions:{map: map}
        });
        local.search(keyword);
    }
</script>
</html>