百度地图－自定义搜索、自定义marker、地图选址实用实例

该实例中包含地图自定义搜索、自定义标注marker、地图选址、鼠标样式修改、搜索周边接口等实用功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<style>
#mapbox{width:850px;height:420px; position:absolute; background-color:#CCC; border:1px solid #9CF; font-size:12px;left:200px; top:50px;}
#mapbox #map{width:600px;height:400px; float:left;}
#mapbox #results{width:250px; margin-top:10px; float:right;}
.mapheader{ height:25px;width:250px; float:right; overflow:hidden;}
#mapbox h2{ margin:1px; padding-left:10px; height:20px; line-height:20px; font-size:12px; color:#0066CC; font-weight:100; background:#9CF; cursor:move}
#mapbox .close{ display:block; position:absolute; right:10px; top:0px; line-height:22px; text-decoration:none; color:#0000}
</style>
</head>
<body>  <div id="mapbox">  <h2 οnmοusedοwn="drag(this.parentNode,event)">百度地图<a href="javascript:" οnclick="document.getElementById('map').style.display='none'" class="close">×</a></h2>  <div class="mapheader"><input type="text" id="searchtext" /><input type="button" value="搜索" id="searchbt" οnclick="serachlocal()" />  </div>  <div id="map" style="cursor: crosshair;"></div>  <div id="results"></div>  <div id="mapx"></div>  <div id="mapy"></div>  <div id="level"></div>  </div>
<script type="text/javascript">//显示一个对象的所有属性
function showAtrributes(event){var out='';  for(var p in event){  if(typeof(p)!="function"){  out+=p+"="+event[p]+"  ";  }  }  alert(out);
}
var key='F4bfb7ec82f386cf8541158ad5801138';
var map = new BMap.Map("map"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别  /*
1.
NavigationControl：地图平移缩放控件，默认位于地图左上方，它包含控制地图的平移和缩放的功能。
OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。
MapTypeControl：地图类型控件，默认位于地图右上方。
CopyrightControl：版权控件，默认位于地图左下方。
*/
//配置控件参数
//var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}
//map.addControl(new BMap.NavigationControl(opts));
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
//map.addControl(new BMap.OverviewMapControl());
//map.addControl(new BMap.MapTypeControl());
//map.setCurrentCity("台州");
map.setDefaultCursor("crosshair");/*
var marker = new BMap.Marker(point);        // 创建标注
map.addOverlay(marker);    var opts = {     //width : 250,     // 信息窗口宽度     //height: 100,     // 信息窗口高度     title : "Hello"  // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
*/
map.enableScrollWheelZoom();//滚轮缩放事件
//map.enableKeyboard(); //键盘方向键缩放事件
map.enableContinuousZoom(); // 开启连续缩放效果
//map.enableInertialDragging();　// 开启惯性拖拽效果   preMarker='';//点击地图选址
map.addEventListener("click", function(e){   //点击事件
//alert(e.point.lng + ", " + e.point.lat);if(!e.overlay){document.getElementById("mapx").innerHTML="鼠标当前x位置:"+e.point.lng;  document.getElementById("mapy").innerHTML="鼠标当前y位置:"+e.point.lat;  document.getElementById("level").innerHTML="缩放等级:"+this.getZoom();var targetUrl='http://api.map.baidu.com/geocoder/v2/?ak='+key+'&location='+e.point.lat+','+e.point.lng+'&output=json&pois=0';$.ajax({url:targetUrl,type:"get",async : false,dataType:'jsonp',beforeSend:function(){//alert(targetUrl);  },success:function(data,status){//alert(status);if(status=='success' && data.status==0){//alert(JSON.stringify(data));//location.href=a.attr("href");var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {offset: new BMap.Size(10, 25), // 指定定位位置imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移});var marker=new BMap.Marker(e.point,{icon:myIcon});map.removeOverlay(preMarker);map.addOverlay(marker);content="<div>地址:"+data.result.formatted_address+"</div>";content+='<form action="around.php" method="post"><input type="hidden" name="lng" value="'+data.result.location.lng+'"><input type="hidden" name="lat" value="'+data.result.location.lat+'"><input type="submit" value="查看附近幼儿园"></form>';var info=new BMap.InfoWindow(content);marker.openInfoWindow(info);                 preMarker=marker;}},error:function(XMLHttpRequest, textStatus, errorThrown){alert(XMLHttpRequest.status);alert(XMLHttpRequest.readyState);alert(textStatus);alert(errorThrown);}});}
});    map.addEventListener("dragend", function(){   //拖拽事件  var center = map.getCenter();     document.getElementById("mapx").innerHTML="拖拽后中心x位置:"+center.lng;  document.getElementById("mapy").innerHTML="拖拽后中心y位置:"+center.lat;  document.getElementById("level").innerHTML="缩放等级:"+this.getZoom();  //alert("地图中心点变更为：" + center.lng + ", " + center.lat);
});   map.addEventListener("zoomend", function(){   //缩放事件  //alert("地图缩放至：" + this.getZoom() + "级");
});/*自定义搜索2*/
function serachlocal(){var markerArray=new Array();var typeArray=new Array('','－公交站','','－地铁站');var local = new BMap.LocalSearch(map, {     renderOptions: {     map: map,     //panel: "results",//结果容器id  autoViewport: true,   //自动结果标注  selectFirstResult: false   //不指定到第一个目标  },     pageCapacity: 8,//自定义marker事件onMarkersSet:function(pois){for(var i=0;i<pois.length;i++){(function(){var index=i;var curPoi=pois[i];var curMarker=pois[i].marker;markerArray[i]=curMarker;content="<h3>"+curPoi.title+typeArray[curPoi.type]+"</h3>";content+="<div>地址:"+curPoi.address+"</div>";content+='<form action="around.php" method="post"><input type="hidden" name="lng" value="'+curPoi.point.lng+'"><input type="hidden" name="lat" value="'+curPoi.point.lat+'"><input type="submit" value="查看附近幼儿园"></form>';curMarker.addEventListener('click',function(event){//showAtrributes(event);var info=new BMap.InfoWindow(content);curMarker.openInfoWindow(info);var position=curMarker.getPosition();document.getElementById("mapx").innerHTML="拖拽后中心x位置:"+position.lng;  document.getElementById("mapy").innerHTML="拖拽后中心y位置:"+position.lat;  //document.getElementById("level").innerHTML="缩放等级:"+this.getZoom();  });})();}},//自定义搜索回调数据onSearchComplete:function(results){if(local.getStatus() == BMAP_STATUS_SUCCESS){var html='<ol style="list-style: none outside none; padding: 0px; margin: 0px;">';for(var i=0;i<results.getCurrentNumPois();i++){var poi=results.getPoi(i);var bYposition=2-i*20;html+='<li id="poi'+i+'" index="'+i+'" style="margin: 2px 0px; padding: 0px 5px 0px 3px; cursor: pointer; overflow: hidden; line-height: 17px;">';html+='<span style="background:url(http://api.map.baidu.com/bmap/red_labels.gif) 0 '+bYposition+'px no-repeat;padding-left:10px;margin-right:3px"></span>'html+='<span style="color:#00c;text-decoration:underline"><b>'+poi.title+'</b>'+typeArray[poi.type]+'</span>';html+='<span style="color:#666;">-'+poi.address+'</span>'html+='</li>';}html+="</ol>";$("#results").html(html);for(var i=0;i<results.getCurrentNumPois();i++){(function(){var index=i+1;var poi=results.getPoi(i);content="<h3>"+poi.title+typeArray[poi.type]+"</h3>";content+="<div>地址:"+poi.address+"</div>";content+='<form action="around.php" method="post"><input type="hidden" name="lng" value="'+poi.point.lng+'"><input type="hidden" name="lat" value="'+poi.point.lat+'"><input type="submit" value="查看附近幼儿园"></form>';var info=new BMap.InfoWindow(content)$("#poi"+i).click(function(){markerArray[$(this).attr('index')].openInfoWindow(info);});})();}}},});local.search(document.getElementById("searchtext").value);
}
</script>  <script type="text/javascript">
function drag(obj,e){  var e=e ? e : event;  var mouse_left=e.clientX-obj.offsetLeft;  var mouse_top=e.clientY-obj.offsetTop;  var docmousemove=document.onmousemove;  var docmouseup=document.onmouseup;  document.onselectstart=function(e){return false}  document.οnmοuseup=function(){  document.οnmοusemοve=docmousemove;  document.οnmοuseup=docmouseup;  document.onselectstart=function(e){return true}  }  document.οnmοusemοve=function(ev){  var ev=ev ? ev : event;  if(ev.clientX-mouse_left>0&&document.documentElement.clientWidth-(ev.clientX-mouse_left)-obj.offsetWidth+document.documentElement.scrollLeft>0){  obj.style.left=(ev.clientX-mouse_left)+"px";  }  if(ev.clientY-mouse_top>0&&document.documentElement.clientHeight-(ev.clientY-mouse_top)-obj.offsetHeight+document.documentElement.scrollTop>0){  obj.style.top=(ev.clientY-mouse_top)+"px";  }  }
}
</script>
</body>
</html>

百度地图－自定义搜索、自定义marker、地图选址实用实例相关推荐

分享一个可以自定义搜索定位的地图
分享一个可以自定义搜索定位的地图前面的申请ak密钥步骤都是一致的,这里就不重复描述了,可以通过下面的链接看具体步骤然后复制本篇下面的代码 https://blog.csdn.net/weixin_4 ...
高德地图怎么搜索marker_2018-07-06 高德地图搜索定位，滑动地图显示周边信息，根据地址搜经...
emmmm,效果图先行(搜索定位以及自由滑动地图展示周边位置信息,根据点击的位置获取经纬度) aa.gif 主要代码package com.dydd.wsp.dreamtree.ui.mapimpor ...
高德地图POI搜索，附近地图搜索，类似附近的人搜索
效果图: 首先导入道德地图的SDK,导入步骤不在这里介绍 2:包含头文件: [objc] view plaincopy #import <AMapSearchKit/AMapSearchAPI. ...
百度地图实现自定义搜索
今天花了一天的时间仔细的写了一下百度地图的相关东西,拿出来和大家分享一下. servlet(FindCity.java) package edu.hpu.map.servlet; import jav ...
vue项目中使用百度地图api完成自定义搜索功能（包含搜索详细地理位置）
需求描述: 在vue项目中,有时候,我们需要自定义百度地图的一些功能.譬如,现在的需求,就是需要自定义搜索内容和结果展示. 类似如下页面的功能: 首先在vue项目中,我们可以使用 vue-baidu- ...
android百度地图单点定位_Android百度地图实现搜索和定位及自定义图标绘制并点击时弹出泡泡...
一.问题描述上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡如图所示: 二. ...
高德地图placesearch 搜索结果生成自定义marker
业务需求: 高德地图,输入关键词输入提示(autocomplete), 按照选择的关键词执行地点搜索placesearch在地图上生成标记点marker, 点击标记点弹出自定义信息窗口infowind ...
百度地图鼠标滑过marker时打开自定义信息窗口
在百度地图上实现鼠标滑过marker时打开自定义的信息窗口,当鼠标滑出marker时关闭已打开的信息窗口. 首先,需要在地图上添加一个marker,具体如下所示: $.ajax({async:fals ...
仿去哪网酒店的地图：POI、定位、国际地图、导航、marker及其自定义infowindow
Android 博客之路第二弹:关于最近研究地图的总结. 前言:最近App开发酒店信息需要用到地图模块,所以就目前需要的功能研究了一下.虽然以前也有用到,但以前仅限于marker及infowindow ...

百度地图－自定义搜索、自定义marker、地图选址实用实例

百度地图－自定义搜索、自定义marker、地图选址实用实例相关推荐

最新文章

热门文章