1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 百度地图自定义覆盖物

百度地图自定义覆盖物

时间:2021-03-13 09:45:03

相关推荐

百度地图自定义覆盖物

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(); //清空地图}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。