百度地图API使用记录

逃离我推掉我的手 2022-08-05 08:16 524阅读 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 条评论，524人围观）

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

相关阅读

相关百度地图API的使用——网页中写入百度地图

我们时常在旅行网站、商城网站等都会有一个定位功能和地图出现！那么我们应该要怎样实现这个功能呢？我们自己去实现一个地图，怎样的解决方式显然是不正确的。往往我们都是通过调用成熟的百

红太狼/ 2024年02月17日 15:44/ 0 赞/ 200 阅读

相关 JavaScript API 的使用(百度地图)

百度地图JavaScript API 的使用在使用这些控件和方法之前我们要做的准备： 1、我先要创建一个在百度app文档里面的密匙注意：在那个白名单里面只需要

爱被打了一巴掌/ 2023年03月01日 03:20/ 0 赞/ 33 阅读

相关百度地图API使用记录

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

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

相关如何使用百度地图API

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

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

相关 html百度地图使用记录

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

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

相关百度地图记录

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

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

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

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

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

相关 VUE之使用百度地图API

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

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

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

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

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

相关百度地图API的简单使用

jsdemo：[http://lbsyun.baidu.com/jsdemo.htm\a1\_2][http_lbsyun.baidu.com_jsdemo.htm_a1_2]

男娘i/ 2021年07月26日 12:27/ 0 赞/ 752 阅读