添加百度地图功能

添加百度地图,只需要操作jsp页面就行!
首先写一个

<div class="form">
    
        <div id="allmap" style="width: 100%; height: 500px;">div>
div>

然后你需要引入js:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=EWXzVQfEfXOgPWXpaFQQCgG3">script>
<script type="text/javascript">
            // 百度地图API功能
            var map = new BMap.Map("allmap");
            var point = new BMap.Point("${activityPage.lng}",
                    "${activityPage.lat}");
            var marker = new BMap.Marker(point); // 创建标注
            map.addOverlay(marker); // 将标注添加到地图中
            map.centerAndZoom("武汉", 12);
            map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用
            map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用           
            //单击获取点击的经纬度
            map.addEventListener("click", function(e) {
                $("#lng").val(e.point.lng);
                $("#lat").val(e.point.lat);
            });
            $(function() {
                if ($("#contentBase").hasClass("baseMap")) {
                    $("#content").css("min-width", "1220px");
                }
            });
        script>

最后添加css样式:

<style type="text/css">
#allmap {
    width: 400px;
    height: 300px;
    overflow: hidden;
    margin: 0;
    font-family: "微软雅黑";
}
style>

这样百度地图的功能就能实现了,快来试试吧!(不清楚的可以留言问我)

你可能感兴趣的:(js)