百度地图生成器里的标注内容默认展开

最新推荐文章于 2024-10-21 12:05:03 发布

原创最新推荐文章于 2024-10-21 12:05:03 发布 · 635 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#百度

百度地图生成器：

http://api.map.baidu.com/lbsapi/createmap/index.html

百度地图拾取坐标系统：

http://api.map.baidu.com/lbsapi/getpoint/index.html

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
        <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
        <title>百度地图API自定义地图</title>
        <!--引用百度地图API-->
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=v3Cg0hRvbX7cuUSKG2sEklyeP8iw5eye"></script>
    </head>

    <body>
    <!--百度地图容器-->
    <div style="width:80%;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div>

    </body>
    <script type="text/javascript">
        var cp_title=" XXX有限公司";
        var cp_content="联系人：xx <br/>手  机：189***4367<br/> 电  话：0557-***258 <br/> Q   Q：48***494  <br/>网址：http://www.xxx.com  <br/>地  址：xxxx";

        var cp_lng=116.433589;
        var cp_lat=39.775555;




        //创建和初始化地图函数：
        function initMap(){
            createMap();//创建地图
            setMapEvent();//设置地图事件
            addMapControl();//向地图添加控件
            addMapOverlay();//向地图添加覆盖物
        }
        function createMap(){
            map = new BMap.Map("map");
            map.centerAndZoom(new BMap.Point(cp_lng,cp_lat),19);
        }
        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:cp_content,title:cp_title,imageOffset: {width:-46,height:-21},position:{lat:cp_lat,lng:cp_lng}}
            ];
            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);
                map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
            };
        }
        //向地图添加控件
        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>
    </html>

主要修改：

 var cp_title=" XXX有限公司";
        var cp_content="联系人：xx <br/>手  机：189***4367<br/> 电  话：0557-***258 <br/> Q   Q：48***494  <br/>网址：http://www.xxx.com  <br/>地  址：xxxx";

        var cp_lng=116.433589;
        var cp_lat=39.775555;