前端杂谈 · Web

简单的百度地图调用代码

•̀.̫•́✧ · 7月27日 · 2020年本文1908字 · 阅读5分钟155

1、必须调用jquery库,和百度地图API

<script src="http://api.map.baidu.com/api?v=2.0&ak=67jMQ5DmYTe1TLMBKFUTcZAR"></script>

2、修改函数中,ShowMap(‘坐标地址’, ‘公司名称’, ‘地址’, ‘电话’, ‘传真’, ‘放大倍数’);

    $(function () {
        ShowMap('113.54143,22.274386', '公司名称', '金茂大厦', '021-888888888', '021-888888888', '20');
    })

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	 <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
	 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=67jMQ5DmYTe1TLMBKFUTcZAR"></script>
    <style type="text/css">
    body{margin: 0; padding: 0; font:12px/1 "Microsoft Yahei", "微软雅黑", sans-serif;}
    p, span {
      font-family: 'Microsoft Yahei'!important;
    }
    </style>
</head>
<body>
	<div id="map">
	    <div style="width: 100%; height: 503px;" id="allmap"></div>
	</div>


</body>
</html>
<script type="text/javascript">
    $(function () {
        ShowMap('113.54143,22.274386', '公司名称', '金茂大厦', '021-888888888', '021-888888888', '20');
    })
    function getInfo(id) {
        $.ajax({
            type: "POST",
            url: "WebUserControl/Contact/GetInfo.ashx",
            cache: false,
            async: false,
            data: { ID: id },
            success: function (data) {
                data = eval(data);
                var length = data.length;
                if (length > 0) {
                    ShowMap(data[0]["Image"], data[0]["NewsTitle"], data[0]["Address"], data[0]["Phone"], data[0]["NewsTags"], data[0]["NewsNum"]);
                }
            }
        });
    }
    function ShowMap(zuobiao, name, addrsee, phone, chuanzhen, zoom) {
        var arrzuobiao = zuobiao.split(',');
        var map = new BMap.Map("allmap");
        map.centerAndZoom(new BMap.Point(arrzuobiao[0], arrzuobiao[1]), zoom);
        map.addControl(new BMap.NavigationControl());
        var marker = new BMap.Marker(new BMap.Point(arrzuobiao[0], arrzuobiao[1]));
        map.addOverlay(marker);
        var infoWindow = new BMap.InfoWindow('<p style="color: #bf0008;font-size:14px;">' + name + '</p><p>地址:' + addrsee + '</p><p>电话:' + phone + '</p><p>传真:' + chuanzhen + '</p>');
        marker.addEventListener("click", function () {
            this.openInfoWindow(infoWindow);
        });
        marker.openInfoWindow(infoWindow);
    }
</script>

兼容移动端,但是没有做ie浏览器兼容处理。就因为还有用户使用IE浏览器,才导致此业内毒瘤没有消失!生气!!

0 条回应