Baidu Map-Custom search, custom marker, practical example of map location

Last Update:2018-07-26 Source: Internet

Author: User

Tags json xmlns

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

This instance contains useful features such as map custom search, custom callout marker, map location, mouse style modification, search perimeter interface, and more

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

< title > Untitled Document < / Title >

<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>

< H2 onmousedown = "drag (this. Parentnode, event)" > Baidu map < a href = "javascript:" onclick = "document. Getelementbyid ('map '). Style. Display ='none'" class = "close" > ×</a></h2>

< div class = "maphiader" > < input type = "text" id = "searchtext" / > < input type = "button" value = "search" id = "searchbt" onclick = "serachlocal()" / >

</div>

</div>

//Show all properties of an object

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"); / / create a map instance

Var point = new bmap.point (116.404, 39.915); / / create point coordinates

Map. Centerandzoom (point, 15); / / initialize the map, set the coordinates of the center point and map level

/ *

One

Navigationcontrol: the map pan zoom control, which is located at the top left of the map by default, contains the function of controlling the map pan and zoom.

Overviewmapcontrol: thumbnail map control, located at the bottom right of the map by default, is a collapsible thumbnail map.

Scalecontrol: scale bar control, located at the bottom left of the map by default, displays the scale relationship of the map.

Maptypecontrol: map type control, which is located at the top right of the map by default.

Copyrightcontrol: copyright control. It is located at the bottom left of the map by default.

* /

//Configure control parameters

//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 ("Taizhou");

map.setDefaultCursor("crosshair");

/ *

Var marker = new BMAP. Marker (point); / / create annotation

map.addOverlay(marker);

Var opts = {

//Width: 250, / / information window width

//Height: 100, / / information window height

Title: "hello" / / information window title

}

Var infowindow = new BMAP. Infowindow ("world, opts); / / create information window object

Map. Openinfowindow (infowindow, map. Getcenter()); / / open the information window

* /

Map. Enabledscrollwheelzoom(); / / wheel zoom event

//Map. Enablekeyboard(); / / Keyboard direction key scaling event

Map. Enablecontinuouszoom(); / / enable continuous zoom

//Map. Enableinertialdragging(); / / enable inertia drag effect

preMarker='';

//Click map location

Map.addeventlistener ("click", function (E) {/ / click event

//alert(e.point.lng + ", " + e.point.lat);

if(!e.overlay){

Document. Getelementbyid ("MapX"). InnerHTML = "current x position of mouse:" + e.point.lng;

Document. Getelementbyid ("MAPY"). InnerHTML = "current y position of mouse:" + e.point.lat;

Document. Getelementbyid ("level"). InnerHTML = "zoom level:" + 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), / / specify the location

Imageoffset: new BMAP. Size (0, 0 - 10 * 25) / / set image offset

};

var marker=new BMap.Marker(e.point,{icon:myIcon});

map.removeOverlay(preMarker);

map.addOverlay(marker);

Content = "< div > address:" + data. Result. Formatted_address + "< / div >";

Content + = '< form action = "around. PHP" method = "post" >;

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 ("drawn", function() {/ / drag event

var center = map.getCenter();

Document. Getelementbyid ("MapX"). InnerHTML = "center x position after dragging:" + center.lng;

Document. Getelementbyid ("MAPY"). InnerHTML = "center y position after dragging:" + center. Lat;

Document. Getelementbyid ("level"). InnerHTML = "zoom level:" + this. Getzoom();

//Alert ("map center point changed to:" + center. LNG + "," + center. LAT);

};

Map. Addeventlistener ("zoomend", function() {/ / Zoom event

//Alert ("zoom map to level:" + this. Getzoom() + ");

};

/*Custom search 2*/

function serachlocal(){

var markerArray=new Array();

Var typearray = new array (',' - bus station ',' subway station ');

var local = new BMap.LocalSearch(map, {

renderOptions: {

map: map,

//Panel: "results", / / result container ID

Autoviewport: true, / / Auto result annotation

Selectfirstresult: false / / no first target specified

}

pageCapacity: 8,

//Customizing marker events

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 > address:" + curpoi. Address + "< / div >";

Content + = '< form action = "around. PHP" method = "post" >;

curMarker.addEventListener('click',function(event){

//showAtrributes(event);

var info=new BMap.InfoWindow(content);

curMarker.openInfoWindow(info);

var position=curMarker.getPosition();

Document. Getelementbyid ("MapX"). InnerHTML = "center x position after dragging:" + position.lng;

Document. Getelementbyid ("MAPY"). InnerHTML = "center y position after dragging:" + position. Lat;

//Document. Getelementbyid ("level"). InnerHTML = "zoom level:" + this. Getzoom();

};

} ();

}

//Custom search callback data

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 > address:" + poi. Address + "< / div >";

Content + = '< form action = "around. PHP" method = "post" >;

var info=new BMap.InfoWindow(content)

$("#poi"+i).click(function(){

markerArray[$(this).attr('index')].openInfoWindow(info);

};

} ();

}

};

local.search(document.getElementById("searchtext").value);

}

</script>

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.onmouseup=function(){

document.onmousemove=docmousemove;

document.onmouseup=docmouseup;

document.onselectstart=function(e){return true}

}

document.onmousemove=function(ev){

var ev=ev ? ev : event;

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>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More