百度地图标注基础篇

蔚落 2021-09-10 05:06 488阅读 0赞

<script type="text/javascript">  
    var mapObj = new BMap.Map("mapObj");          // 创建地图实例  
    //向地图中添加缩放控件
    var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
    mapObj.addControl(ctrl_nav);
    mapObj.enableDragging();//启用地图拖拽事件，默认启用(可不写)
    mapObj.enableScrollWheelZoom();//启用地图滚轮放大缩小
    mapObj.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
    mapObj.enableKeyboard();//启用键盘上下左右键移动地图
    //mapObj.centerAndZoom("<?php echo $defaultcity?>");
    if(window.top.$('#<?php echo $field?>').val()) {
    	drawPoints();
    } else {
    	mapObj.centerAndZoom("<?php echo $defaultcity?>");
    }
    var localSearch = new BMap.LocalSearch(mapObj);
       localSearch.enableAutoViewport(); //允许自动调节窗体大小
    
    function keywordSearch() {
        mapObj.clearOverlays();//清空原来的标注
    	var keyword = document.getElementById("keyword").value;
    	 localSearch.setSearchCompleteCallback(function (searchResult) {
            var poi = searchResult.getPoi(0);
      //      document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat;
            mapObj.centerAndZoom(poi.point, 13);
            var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  // 创建标注，为要查询的地方对应的经纬度
            mapObj.addOverlay(marker);
            var content = document.getElementById("keyword").value + "<br/><br/>经度：" + poi.point.lng + "<br/>纬度：" + poi.point.lat;
            var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
            marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); });
            // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        });
        localSearch.search(keyword);
    }
    
    function drawPoints(){
    	var data = window.top.$('#<?php echo $field?>').val();
    	var data = data.split('|');
    	var lngX = data[0];
    	var latY = data[1];
    	var zoom = data[2] ? data[2] : 10;
    	mapObj.centerAndZoom(new BMap.Point(lngX,latY),zoom);
    	// 创建图标对象
    	var myIcon = new BMap.Icon('<?php echo IMG_PATH ?>icon/mak.png', new BMap.Size(27, 45));
    
    	// 创建标注对象并添加到地图
    	var center = mapObj.getCenter();
    	var point = new BMap.Point(lngX,latY);
    	var marker = new BMap.Marker(point, {icon: myIcon});
    	marker.enableDragging();
    	mapObj.addOverlay(marker);
    	var ZoomLevel = mapObj.getZoom();
    	marker.addEventListener("dragend", function(e){  
    		window.top.$('#<?php echo $field?>').val(e.point.lng+'|'+e.point.lat+'|'+ZoomLevel); 
    	}) 
    }
    
    function addMarker(){ 
    	  mapObj.clearOverlays();
    	  // 创建图标对象
    	  var myIcon = new BMap.Icon('<?php echo IMG_PATH ?>icon/mak.png', new BMap.Size(27, 45));
    	
    	  // 创建标注对象并添加到地图
    	  var center = mapObj.getCenter();
    	  var point = new BMap.Point(center.lng,center.lat);
    	  var marker = new BMap.Marker(point, {icon: myIcon});
    	  marker.enableDragging();
    	  mapObj.addOverlay(marker);
    	  var ZoomLevel = mapObj.getZoom();
    	  window.top.$('#<?php echo $field?>').val(center.lng+'|'+center.lat+'|'+ZoomLevel);
    	  marker.addEventListener("dragend", function(e){  
    		window.top.$('#<?php echo $field?>').val(e.point.lng+'|'+e.point.lat+'|'+ZoomLevel); 
    	}) 
    }
    
    function mapClose(){
    	var CityBox=$(".CityBox");
    	if(CityBox.css('display')=='none'){
    		CityBox.show();
    	}else{
    		CityBox.hide();
    	}
    }
    
    function removeMarker() {
    	mapObj.clearOverlays();
    	mapObj.centerAndZoom("<?php echo $defaultcity?>");
    	$("#curCity").html('<?php echo $defaultcity?>');
    	window.top.$('#<?php echo $field?>').val('');
    }
    </script>

发表评论取消回复

表情：

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

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

相关阅读

相关百度地图三维盒子模型标注

效果图 ![3230800605fb423481850e311a45c6fd.png][] 利用百度地图mapv实现地图盒子模型标准代码 function b

偏执的太偏执、/ 2024年03月30日 08:45/ 0 赞/ 91 阅读

相关百度地图显示多个标注点

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMy

曾经终败给现在/ 2023年05月21日 15:22/ 0 赞/ 16 阅读

相关百度地图API 实现地图多点标注

1.MySQL设计 2.java @RequiresPermissions("system:lmonitor:list") @PostMap

以你之姓@/ 2023年01月21日 04:26/ 0 赞/ 30 阅读

相关百度地图自定义窗口标注

最近做个项目,用到了地图,要在地图上显示车辆的时时信息,页面效果![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

小灰灰/ 2022年12月07日 01:21/ 0 赞/ 292 阅读

相关百度地图API 自定义标注图标

通过Icon类可实现自定义标注的图标，下面示例通过参数MarkerOptions的icon属性进行设置，也可以使用marker.setIcon()方法。 <sc

客官°小女子只卖身不卖艺/ 2022年08月18日 05:45/ 0 赞/ 458 阅读

相关百度地图开发示例：位置标注，标注点弹框

一、申请百度地图开发者AK 1.登录百度开放平台地址：[http://lbsyun.baidu.com/][http_lbsyun.baidu.com]，使用百度账

太过爱你忘了你带给我的痛/ 2022年05月22日 12:58/ 0 赞/ 487 阅读

相关百度地图之标注物聚合

在博客《[百度地图查询视野范围内的建筑物][Link 1]》当中描述了如何查询视野范围内的建筑物，可以减少地图加载标注物的数量，提升速度。但是当地图的zoom级很小时，会出现标

喜欢ヅ旅行/ 2022年01月09日 08:11/ 0 赞/ 589 阅读

相关高德Mapabc地图标注基础篇

<SCRIPT LANGUAGE="JavaScript"> //设置中心点为北京 //设置地图初始化参数对象 var mapOpt

绝地灬酷狼/ 2021年09月10日 05:08/ 0 赞/ 453 阅读

相关百度地图标注基础篇

<script type="text/javascript"> var mapObj = new BMap.Map("mapObj");

蔚落/ 2021年09月10日 05:06/ 0 赞/ 489 阅读

相关百度地图标注点、图层

[标注点地址][Link 1] [图层地址][Link 2] 标注点创建标注点对象 var 标注点对象=new BMap.标注点类型(po

超、凢脫俗/ 2021年07月24日 22:52/ 0 赞/ 733 阅读