文档章节

调用百度地图-直观(不带导航)

羊皮卷
 羊皮卷
发布于 2016/04/09 17:43
字数 774
阅读 35
收藏 0
css

<!--引用百度地图API-->
<style>
    .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;
    padding-right:13px;white-space:nowrap}
    .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;
    white-space:-moz-pre-wrap;word-wrap:break-word}
</style>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>


html

<div class="mapBox" id="baidumapBox"></div>


js

<script type="text/javascript">
    //创建和初始化地图函数:
    function map() {
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMarker();//向地图中添加marker
    }
    function map2() {
        createMap2();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMarker();//向地图中添加marker
    }
    function initMap() {
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMarker();//向地图中添加marker
    }

    //创建地图函数:
    function createMap() {
        var map = new BMap.Map("baidumapBox");//在百度地图容器中创建一个地图
        var point = new BMap.Point(113.352552, 23.17565);//定义一个中心点坐标
        map.centerAndZoom(point, 19);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }
    function createMap2() {
        var map = new BMap.Map("baidumapBox1");//在百度地图容器中创建一个地图
        var point = new BMap.Point(113.352552, 23.17565);//定义一个中心点坐标
        map.centerAndZoom(point, 19);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }


    //地图事件设置函数:
    function setMapEvent() {
        map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }

    //地图控件添加函数:
    function addMapControl(){
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
        map.addControl(ctrl_sca);
    }

    //标注点数组
    var markerArr = [{
        title: "广州达到信息技术APP开发",
        content:"地址:广州市天河区长兴路5号B座203<br/>电话:020-38329755<br/>手机:13560398265",
        point: "113.352650|23.17540",
        isOpen:{isOpen:1,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}},
        icon: {w: 23, h: 25, l: 46, t: 21, x: 9, lb: 12}
    }
    ];
    //创建marker
    function addMarker(){
        for(var i=0;i<markerArr.length;i++){
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0,p1);
            var iconImg = createIcon(json.icon);
            var marker = new BMap.Marker(point,{icon:iconImg});
            var iw = createInfoWindow(i);
            var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
            marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                borderColor:"#808080",
                color:"#333",
                cursor:"pointer"
            });

            (function(){
                var index = i;
                var _iw = createInfoWindow(i);
                var _marker = marker;
                _marker.addEventListener("click",function(){
                    this.openInfoWindow(_iw);
                });
                _iw.addEventListener("open",function(){
                    _marker.getLabel().hide();
                })
                _iw.addEventListener("close",function(){
                    _marker.getLabel().show();
                })
                label.addEventListener("click",function(){
                    _marker.openInfoWindow(_iw);
                })
                if(!!json.isOpen){
                    label.hide();
                    _marker.openInfoWindow(_iw);
                }
            })()
        }
    }
    //创建InfoWindow
    function createInfoWindow(i){
        var json = markerArr[i];
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
        return iw;
    }
    //创建一个Icon
    function createIcon(json){
        var icon = new BMap.Icon("http://map.baidu.com/image/us_cursor.gif", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
        return icon;
    }
    initMap();//创建和初始化地图
    map();//创建和初始化地图
    map2();
</script>






//本文来源于网络,本人总结起来并优化,分享给有需要的前端朋友,如有侵权,请联系删除,也请指正、批评

© 著作权归作者所有

羊皮卷
粉丝 3
博文 166
码字总数 84410
作品 0
广州
前端工程师
私信 提问
安卓百度导航调用

最近才知道百度除了百度地图还有一个百度导航,现在项目需要调用百度导航进行导航,请问有谁做过吗?我只找到调用百度地图的方法。(是app不是sdk)

思落羽
2014/11/25
465
1
调用百度地图-带导航的百度地图

我想在木有提供地图接口的年代,前端工程师门要么只写上企业的具体地址,要么就是用一张标有自己位置的地图图片。但是现在不一样啦!为了增强用户体验,谷歌,甚至百度都很开放了,你可以在他...

羊皮卷
2016/04/09
204
1
Cordova/PhoneGap导航解决方案——在浏览器中调用百度地图APP进行导航

有时候,我们在Cordova/PhoneGap APP中实现导航,如果使用百度SDK开发,工作量是很大的。值得兴奋的是百度地图APP提供了URI API帮我们来实现这个功能。简单的说:如果用户手机中安装了百度地...

crazymus
2015/11/18
4.1K
0
android 调用百度地图客户端,

以前都是使用百度API在软件里面做一个百度地图出来这样感觉既浪费时间又浪费精力,这里就教大家直接使用Intent的方式调用手机上安装的百度地图客户端,访问我们所需要的路径规划等, //调起百...

Remix_jx
2014/09/03
10.9K
1
如何实现在微信公众号或者企业号中用js调用高德地图APP导航和百度地图APP导航的

@zhuxuan2015 你好,想跟你请教个问题:你是如何实现在微信公众号或者企业号中用js调用高德地图APP导航和百度地图APP导航的,可以和我分享一下吗,谢谢

easonwong222
2016/07/27
596
0

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
15
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
17
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部