百度地图自定义覆盖物

1、覆盖物函数

百度地图本身就有自己的图标，在开发过程中我们有时候需要自定义地图上显示的坐标图标，我们可以用图片来代替百度地图本身的这些图标，这样我们就可以跟进需求定制我们想要的效果。

iconPath：图片路径
marker: 存放标注点经纬信息的数组
sizeW：图片尺寸（宽）
sizeH：图片尺寸（高）
marker.Yc.parentNode.parentNode.style.zIndex = 500; // 设置覆盖物层级

function replaceIcon(iconPath, marker, sizeW, sizeH) {map.removeOverlay(marker);var icons = iconPath; //这个是你要显示坐标的图片的相对路径var icon = new BMap.Icon(icons, new BMap.Size(sizeW, sizeH)); //显示图标大小marker.setIcon(icon);//设置标签的图标为自定义图标map.addOverlay(marker);//将标签添加到地图中去
}

2、初始化地图

（1）初始化

var map = new BMap.Map("allmap",{enableMapClick:false}); //去掉地图上地点点击后出现提示信息
map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用var mPoint = new BMap.Point(116.46, 39.92);map.centerAndZoom(mPoint,10); //设置默认显示城市

（2）将输入的文字转换为坐标点

var myGeo = new BMap.Geocoder();// 创建地址解析器实例function writePositonToInput(text) {// 将地址解析结果显示在地图上,并调整地图视野myGeo.getPoint(text, function(point){if (point) {$("#lat").val(point.lat);$("#lng").val(point.lng);}else{}}, "北京");/*var local = new BMap.LocalSearch(map, {renderOptions:{map: map}});local.search(text);*///服务类 LocalSearch
}

（3）画圆圈

var circle = new BMap.Circle(point, 2500,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.1, strokeOpacity: 0.3});map.addOverlay(circle);

3、搜索函数

function search(text) {var lat = $('#lat').val(), //经度lng = $('#lng').val(); //纬度if(!text) {lat = ''; //经度lng = ''; //纬度}if(lat && lng) {$.ajax({url: URL,type: "GET",async: false,dataType: "json",timeout: 8000,success: function (res) {var data = res;// 将地址解析结果显示在地图上,并调整地图视野myGeo.getPoint(text, function(point){if (point) {map.clearOverlays();map.centerAndZoom(point, 13);/*map.addOverlay(new BMap.Marker(point));*///画个圆圈var circle = new BMap.Circle(point, 2500,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.1, strokeOpacity: 0.3});map.addOverlay(circle);//自己的位置做区分var iconPath = '${ctxStatic}/images/position.png',point = new BMap.Point(lng, lat),marker = new BMap.Marker(point);replaceIcon(iconPath, marker, 40, 40);var point = new Array(); //存放标注点经纬信息的数组var marker = new Array(); //存放标注点对象的数组for(var i = 0; i < data.length; i ++) {var lats = data[i].lat,lngs = data[i].lng;point[i] = new BMap.Point(lngs, lats); //循环生成新的地图点marker[i] = new BMap.Marker(point[i]); //按照地图点坐标生成标记map.addOverlay(marker[i]);var iconPath = '${ctxStatic}/images/position-blue.png'; //这个是你要显示坐标的图片的相对路径replaceIcon(iconPath, marker[i], 40, 40);if(lats === lat && lngs === lng) {var iconPath = '${ctxStatic}/images/position.png';replaceIcon(iconPath, marker[i], 40, 40);}}//鼠标悬浮图片替换放大$('#resultCon').on('mouseover', 'li', function () {$(this).css('opacity', '1');var overLng = $($(this).find('input')[0]).val(),overLat = $($(this).find('input')[1]).val();for(var j = 0; j < marker.length; j ++) {var lng = marker[j].point.lng,lat = marker[j].point.lat;console.log(marker);if(lng && lat) {if(lng === parseFloat(overLng) && lat === parseFloat(overLat)) {var iconPath = '${ctxStatic}/images/position-red.png';replaceIcon(iconPath, marker[j], 50, 50);}}}});$('#resultCon').on('mouseout', 'li', function () {$(this).css('opacity', '0.8');var overLng = $($(this).find('input')[0]).val(),overLat = $($(this).find('input')[1]).val();for(var j = 0; j < marker.length; j ++) {var lng = marker[j].point.lng,lat = marker[j].point.lat;if(parseFloat(overLng) === parseFloat(lng) && parseFloat(overLat) === parseFloat(lat)) {var iconPath = '${ctxStatic}/images/position-blue.png';replaceIcon(iconPath, marker[j], 40, 40);}}});}else{}}, "北京市");},error: function () {}});}else {map.clearOverlays(); //清空地图}}

百度地图自定义覆盖物相关推荐

百度地图自定义覆盖物，在手机上无法监听click事件
百度地图自定义覆盖物,在手机上无法监听click事件最近在做手机web端集成百度地图遇到了个坑儿:手机端不支持自定义覆盖物的click事件: 1.自带的marker是支持的(marker不属于自定义 ...
android百度地图自定义覆盖物,Android 百度地图在地图上添加覆盖物（头像）
通过百度地图或者高德地图的demo可以看到有在地图上加载覆盖物的代码,但是加载的都是相同的覆盖物.如果加载不同的人物头像,而且一次加载很多的话,能不能实现呢.确实有这样的需求. 先看看效果图吧. im ...
百度地图自定义覆盖物工具栏，修改标识图标
drawingManager工具栏 drawingModes设置工具栏模式直接上效果代码 <!DOCTYPE html> <html> <head><met ...
百度地图自定义覆盖物自定义字体图标动态修改图标颜色
实现效果: 图标用的是字体图标,为了方便动态改变颜色关键代码 function ComplexCustomOverlay(params) {let defaultParams = {point: { ...
百度地图自定义覆盖物，随地图缩放、拖曳偏移解决办法
如图所示,需要在定义的元素上添加position: absolute属性
百度地图自定义标点。
百度地图自定义标点. 多个标点方法可以进行for循环进行动态标点. <!DOCTYPE html> <html> <head><meta http-equ ...
百度地图自定义结果面板+分页+图层标注(标注点+搜索)
百度地图自定义结果面板+分页+图层标注(标注点+搜索) 示例一: <html> <head><meta http-equiv="Content-Type&qu ...
百度地图自定义吹出框
2019独角兽企业重金招聘Python工程师标准>>> 百度地图自定义吹出框直入正题吧! 这些都是知道的了,看文档添加就行了! 实现三个代理方法: 这个方法类似tableview添 ...
百度地图自定义信息窗口样式
在项目中,UI经常会把信息窗口做自定义设计,那么如何实现自定义样式的信息窗口呢.核心代码如下: /** 创建信息窗口* */function _createMapvInfoWindow(width,h ...