高德Mapabc地图标注基础篇

绝地灬酷狼 2021-09-10 05:08 430阅读 0赞

<SCRIPT LANGUAGE="JavaScript">
      //设置中心点为北京
      //设置地图初始化参数对象
      var mapOptions = new MMapOptions();
      var defaultcity = "<?php echo strtolower(CHARSET)!='utf-8' ? iconv(CHARSET,'UTF-8',$defaultcity) : $defaultcity?>";
      mapOptions.toolbar = MConstants.MINI;
      mapOptions.scale = new MPoint(20,20);  
      mapOptions.zoom = 10;
      mapOptions.overviewMap = MConstants.SHOW;  
      mapOptions.scale = MConstants.SHOW; 
      mapOptions.mapComButton = MConstants.SHOW_NO
      //创建地图对象
      var mapObj = new MMap("mapObj", mapOptions);
      var  maptools = new MMapTools(mapObj);
      maptools.setCenterByCity(defaultcity);
      if(window.top.$('#<?php echo $field?>').val()) {
    	drawPoints();
      } 
    function keywordSearch(){
    	var keywords = document.getElementById("keyword").value;
    	var city = "<?php echo $defaultcity?>";
    	var MSearch = new MPoiSearch();
    	var opt = new MPoiSearchOptions();
    	opt.recordsPerPage = 10;//每页返回数据量，默认为10
    	opt.pageNum = 1;//当前页数。
    	opt.dataType = "";//数据类别，该处为分词查询，只需要相关行业关键字即可
    	opt.dataSources = DS_BASE_ENPOI;//数据源，基础+企业地标数据库（默认）
    	MSearch.setCallbackFunction(keywordSearch_CallBack);
    	MSearch.poiSearchByKeywords(keywords,city,opt);
    }
    var resultCount=10;
    function keywordSearch_CallBack(data){
    	var resultStr="";
    	if(data.error_message != null){
    		resultStr="查询异常！"+data.error_message;
    	}else{
    	switch(data.message){
    		case 'ok':
    			var marker = new Array();
    			if(data.poilist.length==0){
    				resultStr = "未查找到任何结果!<br />建议：<br />1.请确保所有字词拼写正确。<br />2.尝试不同的关键字。<br />3.尝试更宽泛的关键字。";
    			}else{
    				resultCount=data.poilist.length;
    				for (var i = 0; i < data.poilist.length; i++) {
    					resultStr += "<div id='divid"+(i+1)+"' οnmοuseοver='openMarkerTipById1("+(i+1)+",this)' οnmοuseοut='onmouseout_MarkerStyle("+(i+1)+",this)' style=\"font-size: 13px;cursor:pointer;padding:2px 0 10px 5px;\">"+(i+1)+"、"+data.poilist[i].name+"<br \/>";
    					resultStr += TipContents(data.poilist[i].type,data.poilist[i].address,data.poilist[i].tel);
    					resultStr += "<br />城市："+data.poilist[i].citycode + "<br \/></div>";
    					var markerOption = new MMarkerOptions();
    					markerOption.imageUrl ="http://code.mapabc.com/images/lan_1.png";
    
    					var tipOption = new MTipOptions();
    					tipOption.title=(i+1) + ". "+ data.poilist[i].name;
    					var tipC = "<br />"+TipContents(data.poilist[i].type,data.poilist[i].address,data.poilist[i].tel);
    					tipOption.content=tipC;//tip内容
    					tipOption.borderStyle.thickness=2;
    					tipOption.borderStyle.color= 0x005cb5;
    					tipOption.borderStyle.alpha=1;
    					tipOption.titleFontStyle.name="Arial";
    					tipOption.titleFontStyle.size=12;
    					tipOption.titleFontStyle.color= 0xffffff;
    					tipOption.titleFontStyle.bold=true;
    					tipOption.contentFontStyle.name="Arial";
    					tipOption.contentFontStyle.size=13;
    					tipOption.contentFontStyle.color= 0x000000 ;
    					tipOption.contentFontStyle.bold=false;
    					tipOption.fillStyle.color= 0xFFFFFF; //填充色
    					tipOption.fillStyle.alpha=1;
    					tipOption.titleFillStyle.color=0x005cb5;
    					tipOption.titleFillStyle.alpha=1;
    
    					markerOption.tipOption = tipOption;
    					markerOption.canShowTip=true;
    					var mar = new MMarker(new MLngLat(data.poilist[i].x,data.poilist[i].y),markerOption);
    					mar.id=(i+1);
    					marker.push(mar);
    				}
    				mapObj.addOverlays(marker,true);
    				mapObj.addEventListener(mapObj,TIP_OPEN,openTip);
    			}
    		break;
    		case 'error':
    			resultStr= "<div class=\"default\"><div class=\"default_title\">网络忙！请重新尝试！</div><div class=\"d_link\"><div class=\"d_right\"></div><div class=\"suggest\"><strong>建议：</strong><br />如果您刷新页后仍无法显示结果，请过几分钟后再次尝试或者与我们的服务人员联系。<br />Email：service@mapabc.com <br />电话：400 810 0080</div></div></span>错误信息："+data.message+"</div>";
    		break;
    		default:
    			resultStr= "<div class=\"default\"><div class=\"default_title\">对不起！网络繁忙！请稍后重新尝试！</div><div class=\"d_link\"><div class=\"d_right\"></div><div class=\"suggest\"><strong>建议：</strong><br />如果您刷新页后仍无法显示结果，请过几分钟后再次尝试或者与我们的服务人员联系。<br />Email：service@mapabc.com <br />电话：400 810 0080</div></div></span>错误信息："+data.message+"</div>";
    		}
    	}
    	document.getElementById("result").innerHTML = resultStr;
    }
    function TipContents(type,address,tel){
    	if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") {
    		type = "暂无";
    	}
    	if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {
    		address = "暂无";
    	}
    	if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") {
    		tel = "暂无";
    	}
    	var str ="地址：" + address + "<br>电话：" + tel + " <br>类型："+type;
    	return str;
    }
    function openMarkerTipById1(pointid,thiss){  //根据id打开搜索结果点tip
    	thiss.style.background='#CFD6E8';
    	mapObj.openOverlayTip(pointid);
    }
    function onmouseout_MarkerStyle(pointid,thiss) {//鼠标移开后点样式恢复
       thiss.style.background="";
    }
    function openTip(param){
    	var n = "divid"+(param.overlayId);
    	for (var i = 1; i <= resultCount; ++i){
    		var id="divid"+i;
    		document.getElementById(id).style.background='';
    		document.getElementById(id).onmouseout = function(){this.style.backgroundColor='';};
    	}
    	document.getElementById(n).style.background='#CFD6E8';
    	document.getElementById(n).onmouseout = function(){this.style.backgroundColor='#CFD6E8';};
    }
    	
    	function addMarker(){
    		var address = $(window.parent.document).find("input[id='address']").val();
    		var tipOption=new MTipOptions();//添加信息窗口 
    		tipOption.tipType = MConstants.HTML_BUBBLE_TIP;//信息窗口标题  
    		tipOption.title = address;//信息窗口标题  
    		tipOption.content = address;//信息窗口内容   
    		var markerOption = new MMarkerOptions(); 		
    		markerOption.imageUrl='<?php echo IMG_PATH ?>icon/mak.png';		
    		markerOption.picAgent=false;   
    		markerOption.imageAlign=MConstants.BOTTOM_CENTER; 	   
    		markerOption.isBounce=false; 	  
    		markerOption.isEditable=true;   		
    
    		markerOption.tipOption = tipOption; 		 
    		markerOption.canShowTip= address ? true : false; 	  
    		markerOption.rotation="0"; 		  	
    		markerOption.dimorphicColor="0x00A0FF"; 	  
    		var center = mapObj.getCenter();
    		var ZoomLevel = mapObj.getZoomLevel();
    		Mmarker = new MMarker(new MLngLat(center.lngX,center.latY),markerOption);
    		Mmarker.id="mark101";  
    		mapObj.addOverlay(Mmarker,true) ; 		
    	//	mapObj.addEventListener(mapObj,MConstants.MOUSE_UP,mouseUp);
    		mapObj.addEventListener(mapObj,MOUSE_MOVING,mouseUp);
    		window.top.$('#<?php echo $field?>').val(center.lngX+'|'+center.latY+'|'+ZoomLevel);
    	} 
    	
    	function removeMarker() {
    		mapObj.removeAllOverlays();
    		maptools.setCenterByCity(defaultcity);
    		$("#curCity").html('<?php echo $defaultcity?>');
    		mapOptions.zoom = 10;
    		window.top.$('#<?php echo $field?>').val('');
    	}
    function mouseUp(param)
    	{
    		var object=mapObj.getOverlayById('mark101');
    		var lngX = object.lnglat.lngX;
    		var latY = object.lnglat.latY;
    		window.top.$('#<?php echo $field?>').val(lngX+'|'+latY+'|'+mapObj.getZoomLevel());
    	}
    	function mapClose(){
    		var CityBox=$(".CityBox");
    		if(CityBox.css('display')=='none'){
    			CityBox.show();
    		}else{
    			CityBox.hide();
    		}
    	}
    	
    	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.setZoomAndCenter(zoom,new MLngLat(lngX,latY));
    		var markerOption = new MMarkerOptions();
    		var tipOption=new MTipOptions();//添加信息窗口 
    		var address = "123123";
    		tipOption.tipType = MConstants.HTML_BUBBLE_TIP;//信息窗口标题  
    		tipOption.title = address;//信息窗口标题  
    		tipOption.content = address;//信息窗口内容     
    		var markerOption = new MMarkerOptions(); 		
    		markerOption.imageUrl="<?php echo IMG_PATH ?>icon/mak.png";		
    		markerOption.picAgent=false;   
    		markerOption.isEditable=true;  
    		markerOption.imageAlign=MConstants.BOTTOM_CENTER; 	   
    		markerOption.tipOption = tipOption; 		  
    		markerOption.canShowTip= address ? true : false; 	  	
    		markerOption.dimorphicColor="0x00A0FF"; 			 			
    		Mmarker = new MMarker(new MLngLat(lngX,latY),markerOption);
    		Mmarker.id="mark101";
    		mapObj.addOverlay(Mmarker,true);
    		mapObj.addEventListener(mapObj,MOUSE_MOVING,mouseUp);
    	}	
    </script>