百度地图API使用记录

逃离我推掉我的手 2022-08-05 08:16 300阅读 0赞

背景：最近需要开发一个使用到地图的网站，对百度地图API做了些研究，记录如下

使用方法：

1.引入百度脚本

<span style="font-size:18px;"><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZEiWGifCiQaX0Yj0sxbYmziG"></script></span>

2.初始化地图

var  map = new BMap.Map("allmap", { minZoom: 14, maxZoom: 18 });
               map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
               map.setCurrentCity("厦门");          // 设置地图显示的城市 此项是必须设置的
               map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
               var point = new BMap.Point(118.15, 24.48);
               map.centerAndZoom(point, 16);

</pre><pre name="code" class="javascript"><span style="background-color: rgb(240, 240, 240);">3.在地图上添加自定义的Marker，并为marker添加一些事件</span>

<span style="background-color: rgb(240, 240, 240);">
    </span>

var myIcon = new BMap.Icon(lcImgUrl, new BMap.Size(22, 40));
                myIcon.setImageSize(new BMap.Size(22, 40));
                
                //var markers = [];
                for (var i = 0; i < crossCollection.length; i++)
                {
                    var temp = crossCollection[i];
                    //创建路口信号灯标志
                    var pt = new BMap.Point(temp.lon, temp.lat);                
                    var crossImgM = new BMap.Marker(pt, { icon: myIcon });  // 创建标注
                    crossImgM.setTitle(temp.crossName);
                    //crossImgM.setRotation(20);
                    map.addOverlay(crossImgM);
                    //markers.push(crossImgM);
                    //闭包
                    (function(){
                        crossImgM.addEventListener("click", setContentForPopup);  
                        crossImgM.addEventListener("infowindowopen",openPopup);
                        crossImgM.addEventListener("infowindowclose",closePopup);
                    })();               
                }

<span style="font-size: 18px;">4.动态的改变marker图标</span>

<span style="font-size: 18px;"></span><pre name="code" class="javascript"> var myIcon = new BMap.Icon(lcImgUrl, new BMap.Size(22, 40));
     myIcon.setImageSize(new BMap.Size(22, 40));
     maker.setIcon(myIcon);

发表评论取消回复

表情：

评论列表（有 0 条评论，300人围观）

还没有评论，来说两句吧...

相关阅读

相关百度地图API使用记录

背景：最近需要开发一个使用到地图的网站，对百度地图API做了些研究，记录如下使用方法： 1.引入百度脚本 <span style="

逃离我推掉我的手/ 2022年08月05日 08:16/ 0 赞/ 301 阅读

相关如何使用百度地图API

首先你要先去百度地图开发者平台去注册一个开发者账号然后要获取AK密钥获取之后再HTML网页了引入就好了 <script src="http://api.map

你的名字/ 2022年06月11日 09:15/ 0 赞/ 320 阅读

相关 js 百度地图api

[百度地图JavaScript API][JavaScript API]是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支

拼搏现实的明天。/ 2022年06月10日 03:51/ 0 赞/ 317 阅读

相关 html百度地图使用记录

map.panTo(new\_point); 需要在当前窗口下才能调用成功。tab要切换到才能调用有效果 ![Image 1][] var

Love The Way You Lie/ 2022年06月09日 03:08/ 0 赞/ 256 阅读

相关 js+百度地图API

js与百度地图API实例： <div id='address'></div> <script src="http://api.map.baidu.com/ap

旧城等待，/ 2022年04月16日 03:59/ 0 赞/ 366 阅读

相关 JAVA 百度地图 API

唉。。已经无力吐槽废话。。直接进入正题吧。。第一次写。。如有不足之处请谅解。。哦对了。。我们这个是 web 端获取 API 的官方文档：[http://lbsyun.ba

你的名字/ 2022年02月24日 12:58/ 0 赞/ 515 阅读

相关百度地图记录

这是效果图，标注是闪烁的，而且上万个标注不会卡，使用的 mapv框架。点击某一类型可以移除。 ![watermark_type_ZmFuZ3poZW5naGVpd

落日映苍穹つ/ 2022年01月28日 09:21/ 0 赞/ 411 阅读

相关百度地图Javascript API使用详解

首先登录百度地图开发平台：[http://lbsyun.baidu.com/][http_lbsyun.baidu.com] ![watermark_type_ZmFuZ3p

客官°小女子只卖身不卖艺/ 2021年11月08日 16:20/ 0 赞/ 504 阅读

相关 VUE之使用百度地图API

利用vue创建点餐系统，在点餐系统中需要知道商家地址信息，这时就需要借用百度地图API。步骤一：申请百度地图密钥；步骤二：在index.htm

深碍√TFBOYSˉ_/ 2021年09月29日 09:14/ 0 赞/ 486 阅读

相关百度地图API 加载百度地图

前言百度地图在日常生活中应用的越来越多，功能也日渐丰富，我们可以使用ArcGIS JS API加载在线百度地图（[https://blog.csdn.net/i

布满荆棘的人生/ 2021年09月15日 02:50/ 0 赞/ 736 阅读