Article Detail

百度地图代码

/*一定要给宽高度*/ .ditu{width:900px;height:300px;} //创建和初始化地图函数: function initMap(){ c...

HTML 阅读 41.4万 3 分钟阅读 2015-10-15 16:50
GDScript3
72 行
<style>
/*一定要给宽高度*/
.ditu{width:900px;height:300px;}

</style>

<div class="ditu" id="map"></div>

<!-- id=map 固定不能修改删除! 可自定义 ditu 类-->

<!-- 获取经纬度链接
http://api.map.baidu.com/lbsapi/getpoint/index.html
-->

<script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript"></script>
<script type="text/javascript">
    //创建和初始化地图函数:
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMapOverlay();//向地图添加覆盖物
    }
    function createMap(){
        map = new BMap.Map("map");
        map.centerAndZoom(new BMap.Point(108.311097,22.882695),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:"地址:南宁市安园东路18号",title:"广西工业器材城",imageOffset: {width:-46,height:-21},position:{lat:22.882695,lng:108.311097}}
        ];
        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:false});
        map.addControl(overviewControl);
    }
    var map;
    initMap();
</script>
Comments 评论区
Administrator 2017-10-24 09:39

百度移动地图,手机客户端地图,移动设备

GDScript3
18 行
<script type="text/javascript" src="http://api.map.baidu.com/api?type=quick&ak=X8u8xx9GzO88EIydfLbTsvbK&v=1.0"></script>
<!---------------------------------- 地图开始 ---------------------------------->
<div class="lxfsditu"  id="map" style="border:1px solid #ccc; width:15rem; height:11.85rem;">
</div>
<!---------------------------------- 地图结束 ---------------------------------->

<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("map");
	map.centerAndZoom(new BMap.Point(108.312475,22.772913), 14);

	map.addControl(new BMap.ZoomControl());  //添加地图缩放控件
	var marker1 = new BMap.Marker(new BMap.Point(108.312475,22.772913));  //创建标注
	map.addOverlay(marker1);                 // 将标注添加到地图中
	//创建信息窗口
	var infoWindow1 = new BMap.InfoWindow("有限公司<br>南宁市金凯路11号荣港城二期号");
	marker1.addEventListener("click", function(){this.openInfoWindow(infoWindow1);});
	</script>
| | #0
Comment Form 留下评论
正在回复 #0
粘贴图片、拖拽文件,或点上面的按钮上传 图片会自动插入 [img] 标签,其他附件会自动插入 [attach] 标签。
正在上传...
提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称;reply 会生成一条带楼层回链的新评论,quote 会附带完整引用块,并保持评论锚点跳转。

lizhenqiu blog is powered by lizhenqiu.com Version 6.9

Processed in 0.0212 second(s) W3C

本博客的所有原创作品采用 知识共享 署名-非商业性使用-相同方式共享 2.5 协议 进行许可

本站由 七七牛 云存储 阿阿里云 计算与安全服务 拍又拍云 CDN 加速 百百度智能 AAMH 布布集网 AI指南针AI

桂公网安备 45010302000998号 桂ICP备15007619号-1 中国互联网举报中心 建议使用谷歌浏览器浏览
Navigation 文章导航
⌂ ↓ ↑
100%
图片预览
Gallery 图集
0 张图片

正在整理正文和评论里的图片。

当前页还没有可展示的图片。
Quick Comment 快速评论

直接输入内容,提交时仍会走当前页面的人机验证。

正在上传...
操作提示