当前位置: 首页 >>CMS系统 >>Dedecms >>百度自定义地图调用JS代码

百度自定义地图调用JS代码

时间:2018/5/11 17:30:36 【admin】

百度自定义地图调用JS代码…

调用方式:

<iframe src="map.html" scrolling="no" style="border:0px;width:100%;height:400px;"></iframe>

源码(map.html):

<html>

<head >

<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>

<meta name="keywords" content="联系我们">

<meta name="description" content="联系我们">

<link rel="shortcut icon" href="/favicon.ico" />

<link rel="bookmark"href="/favicon.ico" />

<meta name="author" content="Kenbest,QQ:664627440" />

<title>联系方式</title>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度地图调用接口TOKEN"></script>

</head>

<body bgcolor='#ffffff' leftmargin='0' topmargin='0' marginwidth='0' onco ntextmenu='event.returnValue=false' onsel ectstart='return false' marginheight='0' id=divStay style='width:expression(intParse(window.screen.width)-0;'>



<div style="width:97%;height:360px;border:#ccc solid 1px;font-size:12px" id="map"></div>

    <script type="text/javascript">

        //创建和初始化地图函数:

        function initMap() {

            createMap();//创建地图

            setMapEvent();//设置地图事件

            addMapControl();//向地图添加控件

            addMapOverlay();//向地图添加覆盖物

        }

        function createMap() {

            map = new BMap.Map("map");

            map.centerAndZoom(new BMap.Point(113.879185, 23.008461), 17);

        }

        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: "HDHCMS有限公司", imageOffset: { width: 0, height: 3 }, position: { lat: 23.008461, lng: 113.879185 } }

            ];

            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);

        }

        var map;

        initMap();

  </script>

</body></html>


相关文章

图片新闻

阅读排行

CopyRight:2007-2018 编程语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com

分享按钮