第三方插件——地图

时间：2021-07-06 17:45:33
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>地图</title>
        <script src="../js/jquery.min.js"></script>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A0ypivVblFCZO0O6N8wpDI6qoCPoD0NX"></script>
        <script type="text/javascript">
            $(function() {
                var map;
                initMap();
            });
        </script>
        <script type="text/javascript">
            //创建和初始化地图函数：
            function initMap() {
                createMap(); //创建地图
                setMapEvent(); //设置地图事件
                addMapControl(); //向地图添加控件
                addMapOverlay(); //向地图添加覆盖物
            }

            function createMap() {
                map = new BMap.Map("map");
                var point = new BMap.Point(114.074662, 22.65647); // 创建点坐标
                map.centerAndZoom(point, 16);
                var loadCount = 0;
                map.addEventListener("tilesloaded", function() {
                    if(loadCount == 1) {
                        map.setCenter(point);
                    }
                    loadCount = loadCount + 1;
                });
            }

            function setMapEvent() {
                map.enableScrollWheelZoom();
                map.enableKeyboard();
                map.enableDragging();
                map.enableDoubleClickZoom()
            }

            function addClickHandler(target, window) {
                target.addEventListener("click", function() {
                    target.openInfoWindow(window);
                });
            }

            function addMapOverlay() {
                var markers = [{
                    content: "",
                    title: "深圳找房网络科技有限公司",
                    imageOffset: {
                        width: 0,
                        height: 3
                    },
                    position: {
                        lat: 22.656516,
                        lng: 114.07468
                    }
                }];
                for(var index = 0; index < markers.length; index++) {
                    var point = new BMap.Point(markers[index].position.lng, markers[index].position.lat);
                    var marker = new BMap.Marker(point, {
                        icon: new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(20, 25), {
                            imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height)
                        })
                    });
                    var label = new BMap.Label(markers[index].title, {
                        offset: new BMap.Size(25, 5)
                    });
                    var opts = {
                        width: 200,
                        title: markers[index].title,
                        enableMessage: false
                    };
                    var infoWindow = new BMap.InfoWindow(markers[index].content, opts);
                    marker.setLabel(label);
                    addClickHandler(marker, infoWindow);
                    map.addOverlay(marker);
                };
            }
            //向地图添加控件
            function addMapControl() {
                var scaleControl = new BMap.ScaleControl({
                    anchor: BMAP_ANCHOR_BOTTOM_LEFT
                });
                scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
                map.addControl(scaleControl);
                var navControl = new BMap.NavigationControl({
                    anchor: BMAP_ANCHOR_TOP_LEFT,
                    type: BMAP_NAVIGATION_CONTROL_LARGE
                });
                map.addControl(navControl);
            }
        </script>
        <style>
            #map {
                width: 100%;
                height: 550px;
                border: #ccc solid 1px;
                font-size: 12px;
                margin-top: 30px;
            }
        </style>
    </head>

    <body>
        <div id="map"></div>
    </body>

</html>

 

标签：

相关文章