百度地图调用加载显示Marker，并添加点击事件

注册百度开发者账号，申请应用AK
百度地图开发平台官网
点击右上角控制台，选择创建应用
创建应用,勾选浏览器端，白名单填写*
注：如上线更改为公网IP，如浏览器端显示调用选择浏览器端，如服务端调用数据接口开发则选择服务端，按需创建即可。此处为浏览器端加载显示地图，故选择浏览器端
点击确认，获取AK
返回控制台-我的应用即可查看应用AK
网页端标签引入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=申请的ak"></script>

页面声明
声明div容器加载显示地图，注div要有宽高，id为加载绑定地图的要素

 <div class="map-box" id="map" ></div>

调用api加载显示地图

var map; //Map实例
//地图中心坐标
var mapCenterX = 126.534943;
var mapCenterY = 45.808585;
//加载显示marker数组
var markerArr;
function map_init() {//传入绑定的地图容器idmap = new BMap.Map("map");//初始化地图,设置中心点坐标和地图级别。map.centerAndZoom(new BMap.Point(mapCenterX, mapCenterY),12);//启用滚轮放大缩小map.enableScrollWheelZoom(true);//向地图中添加缩放控件var ctrlNav = new window.BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT,type: BMAP_NAVIGATION_CONTROL_LARGE});//地图缩放控件map.addControl(ctrlNav);//向地图中添加缩略图控件var ctrlOve = new window.BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT,isOpen: 1});map.addControl(ctrlOve);//添加鹰眼var overviewControl = new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT,isOpen: true});map.addControl(overviewControl);//向地图中添加比例尺控件var ctrlSca = new window.BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});map.addControl(ctrlSca);
}$(document).ready(function() {//页面初始化/*$.ajax({type: "POST",url: "",data: {},dataType: "json",success: function(data){markerArr = data.result.markerArr;initData();}                                 });*/markerArr = [{markerId: 1,title: "marker1",point: "126.526607,45.802051",state: 0},{markerId: 2,title: "marker2",point: "126.559952,45.810997",state: 0}];initData();
});

初始化加载显示marker，可根据状态不同显示不同marker

function initMaker() {//绘制marker    for(var i = 0; i < markerArr.length; i++) {idArr.push(markerArr[i].markerId);var p0 = markerArr[i].point.split(",")[0];var p1 = markerArr[i].point.split(",")[1];var state = markerArr[i].state;var maker = addMarker(new window.BMap.Point(p0, p1), i, markerArr[i].title, idArr, state);}
}
// 添加marker
function addMarker(point, index, title, idArr, state) {var myIcon;//状态1if(state == 0) {myIcon = new BMap.Icon("本地自定义图标路径", new BMap.Size(30, 30));}//状态2if(state == 1) {myIcon = new BMap.Icon("本地自定义图标路径", new BMap.Size(30, 30));}var marker = new BMap.Marker(point, {icon: myIcon});var label = new window.BMap.Label(title, {offset: new window.BMap.Size(20, -10)});label.setStyle({backgroundColor: "#fff",maxWidth: "none",color: "#000",fontSize: "12px",height: "20px",lineHeight: "20px",fontFamily: "微软雅黑"});marker.setLabel(label);//marker点击触发事件marker.addEventListener("click", function() {//此处添加marker点击事件     });map.addOverlay(marker);//跳动的动画marker.setAnimation(BMAP_ANIMATION_BOUNCE);return marker;
}

百度地图调用加载显示Marker，并添加点击事件相关推荐

android html图片点击事件,Android TextView加载HTMl图文之添加点击事件和查看图片
前言用TextView显示Html图文,每一个需求都是需要探索的,不再是简单的添加点击事件就可以了. 1.如何添加点击事件这里要使用上在Html.forHtml()方法中的第四个参数:Html.T ...
swift 百度地图加载与百度地图电子围栏加载
最近在写百度地图电子围栏加载,研究源码,也花了一些时间. 1.百度电子围栏整体思路 1)用户创造实体,赋予监控权限 2)对该实体创造电子围栏,有服务端和本地端两种方式,先创造实体,上传到的服务器中.在 ...
加载调用本地百度地图资源，附地图下载器及黑龙江省1-16级瓦片地图,加载显示marker
业务适用场景说明适用范围,需要局域网或者本地环境加载显示百度地图及展示marker的业务场景,可以根据业务使用场景下载不同地区等级的地图瓦片.由于瓦片文件过大,建议放在本地服务器上. 已有1-16级 ...
百度地图开发加载瓦片图片失败导致白块问题修复处理
1. 问题在用百度地图 3.0 api开发时发现,地图有时候有些瓦片图片加载不出来,最后导致白块出现 2. 问题排查通过代码调试,最后发现是使用 map.setMapStyle 方法后出现,于是 ...
leaflet、cesium加载百度地图，加载自定义样式百度地图
1 leaflet.cesium加载百度地图(官方预设样式) 预留,待补充 2 leaflet.cesium加载百度自定义样式地图样式编辑器新版地址:http://lbsyun.baidu.com/ ...
百度地图测加载的两种方式直接加载和异步加载
1.直接加载 <html> <head><meta http-equiv="Content-Type" content="text/html ...
Android在string.xml中定义html文档并加载显示，以及拦截WebView链接事件
一.如何在string.xml中定义html文档首先最好自己在外部新建一个html文件,然后开始写自己的内容.并且在浏览器中预览效果. 首先预先编写一个简单的html文档: <html> ...
百度地图，加载顺序异步问题，用定时器解决
问题描述:譬如说我搜索万达广场,然后地图会展示万达广场并且会展示所在的街道(根据经纬度查询),但是当我点击重新定位的时候应该是要定位到我原来的位置,但是他还是定位到万达广场了,我再次点击定位才会回到我 ...
vue3+百度地图：加载百度地图去除logo
::v-deep(.BMap_cpyCtrl) {display: none; } ::v-deep(.anchorBL) {display: none !important; } 作者上一篇文章, ...

百度地图调用加载显示Marker，并添加点击事件

百度地图调用加载显示Marker，并添加点击事件

百度地图调用加载显示Marker，并添加点击事件相关推荐

最新文章

热门文章