设为首页收藏本站

豆壳DouPHP开发者社区

 找回密码
 立即注册

[共享] 百度地图代码带标注联系模板!

[复制链接]
cuihaifeng1234 发表于 2018-8-28 13:15:06 | 显示全部楼层 |阅读模式
<!--引用百度地图API-->
                        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=RnpSFA9OEDOTHokaV1xiHOgY  "></script>
                        <!--百度地图容器-->
                        <div style="width:653px;height:463px;border:#ccc solid 1px;font-size:12px" id="map">
                        </div>
                        {literal}
                        <script type="text/javascript">
                            //创建和初始化地图函数:
                            function initMap() {
                                createMap();//创建地图
                                setMapEvent();//设置地图事件
                                addMapControl();//向地图添加控件
                                addMapOverlay();//向地图添加覆盖物
                            }

                            function createMap() {
                                map = new BMap.Map("map");
                                map.centerAndZoom(new BMap.Point(113.265617, 34.823861), 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: "手机:18538521188<br/> QQ:2701204326<br/>   邮箱:lvsenhuabao@163.com<br/>   地址:郑州市上街区昆仑路102号",
                                        title: "郑州绿森环保机械有限公司",
                                        imageOffset: {width: -46, height: -21},
                                        position: {lat: 34.823861, lng: 113.265617}
                                    }
                                ];
                                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 overviewControl = new BMap.OverviewMapControl({
                                    anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                                    isOpen: true
                                });
                                map.addControl(overviewControl);
                            }

                            var map;
                            initMap();
                        </script>{/literal}
回复

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|DouCo.Com ( 闽ICP备07031922号  

GMT+8, 2018-10-24 14:13 , Processed in 0.544894 second(s), 36 queries , Gzip On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.|Style by Coxxs

快速回复 返回顶部 返回列表