百度地图js 学习小记_地图renderoptions-CSDN博客

本文链接：https://blog.csdn.net/weixin_37729684/article/details/79970647

<html>
<head>
<meta charset="utf-8"/>
<title>百度地图Demo</title>
<script src="http://api.map.baidu.com/api?v=2.0&ak=【你的百度ak秘钥】"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

</head>
<body>
<div>
<h5>POI数据搜索</h5><br>
<input id="searchText" type="text"/><br/>
<input id="citySearchBtn" type="button" value="城市搜索"/>
<input id="nearBySearchBtn" type="button" value="圆形搜索"/>
<input id="inBoundsBySearchBtn" type="button" value="矩形搜索"/>
</div>

<div>
<h5>根据位置获取经纬度</h5>
<input id="addressNameTxt" type="text" placeholder="请输入地名信息"/>
<input id="pointMessageTxt" type="text" placeholder="请经纬度信息"/><br/>
<input id="MessageSearchBtn" type="button" value="信息检索"/>
</div>

<div>
<h5>百度地图定位</h5>
<input id="LocationByWebBtn" type="button" value="web定位"/>
<input id="LocationBySDKBtn" type="button" value="SDK定位"/>
</div>

<div>
<h5>路线规划</h5>
<input id="startPointTxt" type="text" placeholder="起点"/>
<input id="endPointTxt" type="text" placeholder="终点"/><br/>
<input id="walkPlanRouteBtn" type="button" value="步行路线规划"/>
<input id="transitPlanRouteBtn" type="button" value="公交规划"/>
<input id="drivePlanRouteBtn" type="button" value="驾车路线规划"/>
<input id="cleanMapBtn" type="button" value="清除地图覆盖物"/>
<input id="showPointBtn" type="button" value="展示规划线路"/>
</div>

<div>

</div>

<div id="map" style="width:75%;height:65%;" align="center"></div>

</body>

<script type="text/javascript">

$(window).load(function(){
initMap();

$("#cleanMapBtn").click(function(){
map.clearOverlays();
});

$("#showPointBtn").click(function(){
console.log("点数:"+points.length);
if(points.length>2){
var index=0;
var preMarker;
var interval=setInterval(function showPoint(){
if(index>0){
map.removeOverlay(preMarker);
var p=new BMap.Polyline([points[index-1],points[index]],
{strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});
map.addOverlay(p);
}
preMarker=new BMap.Marker(points[index]);
map.addOverlay(preMarker);
map.setCenter(points[index]);
index++;
if(index==points.length){clearInterval(interval);}
},50);
}
});

$("#citySearchBtn").click(function(){
var txt=$("#searchText").val();

if(txt){
citySearch(txt);
}else{
alert("请输入搜索内容");
return;
}
});

$("#inBoundsBySearchBtn").click(function(){
var txt=$("#searchText").val();
if(txt){
inBoundsSearch(txt);
}else{
alert("请输入搜索内容");
return;
}
});

$("#nearBySearchBtn").click(function(){
var txt=$("#searchText").val();
if(txt){
nearBySearch(txt);
}else{
alert("请输入搜索内容");
return;
}
});

$("#MessageSearchBtn").click(function(){
var point=$("#pointMessageTxt").val();
var message=$("#addressNameTxt").val();
var geoc=new BMap.Geocoder();
if(!(point || message)){
alert("请输入地址或者经纬度信息");
return;
}else if(point){
var p=new BMap.Point(point.split(";")[1],point.split(";")[0])
geoc.getLocation(new BMap.Point(point.split(";")[1],point.split(";")[0]), function(rs){
var addComp = rs.addressComponents;
var messageStr=addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
$("#addressNameTxt").val(messageStr);
});
}else if(message){
geoc.getPoint(message,function(point){
if(point){
$("#pointMessageTxt").val(point.lat+";"+point.lng);
}else{
alert("没有找到对应经纬度信息");
}
});
}
});

$("#LocationByWebBtn").click(function(){
getLocationByWeb();
});

$("#LocationBySDKBtn").click(function(){
getLocationBySDK();
});

$("#walkPlanRouteBtn").click(function(){
var startPoint =$("#startPointTxt").val();
var endPoint =$("#endPointTxt").val();

if(!(endPoint&&startPoint)){
alert("请输入起点和终点信息");
return;
}else{
planRoute(startPoint,endPoint,1);
}

});

$("#transitPlanRouteBtn").click(function(){
var startPoint =$("#startPointTxt").val();
var endPoint =$("#endPointTxt").val();

if(!(endPoint&&startPoint)){
alert("请输入起点和终点信息");
return;
}else{
planRoute(startPoint,endPoint,2);
}

});

$("#drivePlanRouteBtn").click(function(){
var startPoint =$("#startPointTxt").val();
var endPoint =$("#endPointTxt").val();

if(!(endPoint&&startPoint)){
alert("请输入起点和终点信息");
return;
}else{
planRoute(startPoint,endPoint,3);
}

});

});

function initMap(){
creatMap();
mapAddControl();
addMark();
addLine();
getLocation();
addDrawingControl();
/* pointClusterer ();*/
}

var map;

/* 新建一个地图 */
function creatMap(){
map=new BMap.Map("map");
map.centerAndZoom("北京",12);
addWindowInfo();
}

/* 地图图层添加控件 */
function mapAddControl(){
map.enableScrollWheelZoom(true);
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
}

/* 地图上添加一个点 */
function addMark(){
var point=new BMap.Point(116.404, 39.915);
var mark=new BMap.Marker(point);
markAddListener(mark);
markEnableDragging(mark);
map.addOverlay(mark);

}

/* 点添加点击事件 */
function markAddListener(mark){
mark.addEventListener("click", function(){
alert("您点击了标注");
});
}

/* 点添加拖拽事件 */
function markEnableDragging(mark){
mark.enableDragging();
mark.addEventListener("dragend", function(e){
alert("当前位置：" + e.point.lng + ", " + e.point.lat);
}) ;
}

/* 地图添加线 */
function addLine(){
var line=new BMap.Polyline(
[new BMap.Point(116.399, 39.910),
new BMap.Point(116.405, 39.920)],
{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
map.addOverlay(line);
}

/* 点添加信息窗口 */
function addWindowInfo(point){
var opts = {
width : 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "Hello" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("World", opts); // 创建信息窗口对象
if(!point){
point=map.getCenter();
}
map.openInfoWindow(infoWindow, point); // 打开信息窗口
}

/* 城市搜索 */
function citySearch(point){
var search=new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
search.search(point);
}

/* 矩形区域搜索 */
function inBoundsSearch(point){
var search=new BMap.LocalSearch(map,{
renderOptions:{map: map}
})

search.searchInBounds(point,map.getBounds());
}

/* 某个地点附近区域搜索 */
function nearBySearch(point){
var search=new BMap.LocalSearch(map,{
renderOptions:{map: map, autoViewport: true}
});
search.searchNearby(point,"长安路");
}

/* 根据经纬度获取地址明细 */
function getLocation(){
var geoc=new BMap.Geocoder();
map.addEventListener("click",function(e){
var p=e.point;
geoc.getLocation(p, function(rs){
var addComp = rs.addressComponents;
alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
});
});
}

/* 百度地图根据浏览器定位
* 注：有偏差
*/
function getLocationByWeb(){
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
alert('您的位置：'+r.point.lng+','+r.point.lat);
}else {
alert('failed'+this.getStatus());
}
});
}

/* 百度地图根据内置SDK定位
* 注：有偏差
*/
function getLocationBySDK(){
var geolocation = new BMap.Geolocation();
geolocation.enableSDKLocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
alert('您的位置：'+r.point.lng+','+r.point.lat);
}
else {
alert('failed'+this.getStatus());
}
})
}

var points=[];
/* 地图添加画图空间 */
function addDrawingControl(){
var styleOptions = {
strokeColor:"red", //边线颜色。
fillColor:"red", //填充颜色。当参数为空时，圆形将没有填充效果。
strokeWeight: 3, //边线的宽度，以像素为单位。
strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
strokeStyle: 'solid' //边线的样式，solid或dashed。
}
//实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(map, {
isOpen: false, //是否开启绘制模式
enableDrawingTool: true, //是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏离值
drawingModes : [BMAP_DRAWING_CIRCLE,BMAP_DRAWING_POLYGON] //设置显示画图的类型
},
/* circleOptions: styleOptions, //圆的样式 */
polylineOptions: styleOptions, //线的样式
polygonOptions: styleOptions, //多边形的样式
rectangleOptions: styleOptions //矩形的样式
});
}

/* 点聚合实例 */
/* function pointClusterer(){
var markers = [];
var pt = null;

for(var i=0; i<1000; i++){
var pt=new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);
markers.push(new BMap.Marker(pt));
}
var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
} */

function planRoute(start,end,type){
var driving ;

if(type==1){
driving= new BMap.WalkingRoute(map, {
renderOptions: {map: map}
});
driving.search(start, end);
}else if(type==2){
driving= new BMap.TransitRoute(map, {
renderOptions: {map: map}
});
driving.search(start, end);
}else if(type==3){
driving = new BMap.DrivingRoute(map, {
renderOptions: {
map : map,
panel : "results",
autoViewport: true
}
});
points=[];
driving.setSearchCompleteCallback(function(){
points=driving.getResults().getPlan(0).getRoute(0).getPath();
var line=new BMap.Polyline(points);
map.addOverlay(line);
console.log("点数"+points.length);
});
driving.search(start, end);
}else{
console.log("【type】参数内容非法： "+type);
alert("系统参数异常请联系管理员。");
}
}

</script>

</html>