Baidu Map API display multiple labeling points and add Baidu Style Search window

<%@ page language= "java" pageencoding= "UTF-8"%>
<% @taglib prefix= "C" uri= "Http://java.sun.com/jsp/jstl/core"%>
<% @taglib prefix= "FN" uri= "Http://java.sun.com/jsp/jstl/functions"%>

<script type= "Text/javascript"
 src= "http://api.map.baidu.com/api?v=2.0&ak= it6qaelcioggzcrg4buem598 "></SCRIPT>
<script type=" Text/javascript "
 src=" http:// Api.map.baidu.com/library/searchinfowindow/1.5/src/searchinfowindow_min.js "></SCRIPT>
<link rel= "Stylesheet"
 href= "http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css "/>
<div class=" WP ";
 <div class=" Nearby_hospital ";
  <ul class=" nearby _hospital_box "
   <c:choose>
    <c:when test=" ${empty HL}
     <div class= "signal_source_my";
       <div class= "signal_source_my_l";
              </div>

<div class= "Clear_float" ></div>
</div>
</c:when>
<c:otherwise>
<div class= "Hospital_position" >

<a id= "Sdata" > View map </a>
<a id= "Sdatahos" > View list </a>

<small id= "Address" > Current position:${address}</small>
<a id= "Updata" ></a>

     </div>
     <div id= "hoslist";
      <c:foreach items= "${hl}" var= "HL" varstatus= "vs";

<li><a
Href= "${basepath}department/listbyhospitalid.htm?hospitalid=${hl.id}&privatehospital114=${ hl.privatehospital114} "></a> <span class= "Time_span" > Set number Time ${hl.fhtime}</span> <span
class= "Km_span" > Distance: ${hl.distance} km </span><a
Href= "${basepath}department/listbyhospitalid.htm?hospitalid=${hl.id}&privatehospital114=${ hl.privatehospital114} "
class= "More_hospital" ></a>
</li>
</c:forEach>
</div>

</c:otherwise>

</c:choose>

</ul>

</div>
<div style= "min-height:500px; width:100% "id=" Map ></div>
</div>

<script type= "Text/javascript" >
var url = location.search; Gets the URL in the "?" String after the character
var therequest = new Object ();
if (Url.indexof ("?")! =-1) {
var str = URL.SUBSTR (1);
STRs = Str.split ("&");
for (var i = 0; i < strs.length; i++) {
Therequest[strs[i].split ("=") [0]] = unescape (strs[i].split ("=") [1]);
}
var lon = therequest[' longitude '];
var lat = therequest[' Latitude '];
Alert ("My latitude and longitude" + Lon + "---" + lat);
var markerarr = ${str};
function Map_init () {
var map = new Bmap.map ("map"); Create a Map instance
var point = new Bmap.point (lon, LAT); Map Center Point
Map.centerandzoom (Point, 14); Initializes the map, setting the center point coordinates and the map level.
Map.enablescrollwheelzoom (TRUE); Enable wheel zoom in and zoom out
Map, satellite, mixed mode switch
Map.addcontrol (New Bmap.maptypecontrol ({
Maptypes: [Bmap_normal_map, Bmap_satellite_map,
BMAP_HYBRID_MAP]
}));
Add a zoom control to a map
var ctrlnav = new window. Bmap.navigationcontrol ({
Anchor:bmap_anchor_top_left,
Type:bmap_navigation_control_large
});
Map.addcontrol (Ctrlnav);

Add a thumbnail control to your map
var ctrlove = new window. Bmap.overviewmapcontrol ({
Anchor:bmap_anchor_bottom_right,
Isopen:1
});
Map.addcontrol (Ctrlove);

Add a scale bar control to a map
var Ctrlsca = new window. Bmap.scalecontrol ({
Anchor:bmap_anchor_bottom_left
});
Map.addcontrol (CTRLSCA);

var point = new Array (); Array that holds the latitude and longitude information of the callout point
var marker = new Array (); Array that holds the callout point object
var info = new Array (); Array that holds the Cue Information window object
var Searchinfowindow = new Array ();//array that holds the Retrieve Information window object
for (var i = 0; i < markerarr.length; i++) {
var p0 = markerarr[i].longitude; //
var p1 = markerarr[i].latitude; The latitude and longitude of the map point coordinates are presented separately according to the dot format of the original array.
Point[i] = new window. Bmap.point (P0, p1); Cycle through the generation of new map points
Marker[i] = new window. Bmap.marker (Point[i]); Generate markers According to map point coordinates
Map.addoverlay (Marker[i]);
Marker[i].setanimation (bmap_animation_bounce); Bouncing animations
var label = new window. Bmap.label (Markerarr[i].title, {
Offset:new window. Bmap.size (20,-10)
});
Marker[i].setlabel (label);

Create an Information Window object
Info[i] = "<p style= ' font-size:12px;lineheight:1.8em; ' > "
+ " "
+ "</br> Address:" + markerarr[i].addr + "</br> Phone:" + 114
+ "</br></p>";
Create Baidu Style Search Information Window object
Searchinfowindow[i] = new Bmaplib.searchinfowindow (map,
Info[i], {
Title:markerarr[i].title,//title
width:290,//width
HEIGHT:70,//height
Panel: "Panel",//Search results panel
Enableautopan:true,//auto-pan
Searchtypes: [Bmaplib_tab_search,//around search
Bmaplib_tab_to_here,//GO here
Bmaplib_tab_from_here//Depart from here
]
});
Add a Click event
Marker[i].addeventlistener ("Click", (function (k) {
JS Closed Package
return function () {
Map.centerandzoom (Point[k], 18);
Marker[k].openinfowindow (Info[k]);
Searchinfowindow[k].open (Marker[k]);
}
}) (i));
}
}
Asynchronous call Baidu JS
function Map_load () {
var load = document.createelement ("script");
LOAD.SRC = "Http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR&callback=map_init";
Document.body.appendChild (load);
}
Window.onload = Map_load;

Get Current address information
$
. Ajax ({
URL: "${basepath}hospital/getadder.htm?",
Type: "POST",
Data: {
Longitude:lat,
Latitude:lon
},
Success:function (data) {
document.getElementById (' address '). InnerHTML = "Current Position:"
+ data;

},
Error:function () {
document.getElementById (' address '). InnerHTML = "Current Location: temporarily unable to get your location";

},
});
}
</script>
<script type= "Text/javascript" >
Map
$ ("#sdata"). Click (function () {
$ (' #sdata '). Hide ();
$ (' #allmap '). Show ();
$ (' #sdatahos '). Show ();
$ (' #hoslist '). Hide ();
});
List
$ ("#sdatahos"). Click (function () {
$ (' #sdata '). Show ();
$ (' #allmap '). Hide ();
$ (' #sdatahos '). Hide ();
$ (' #hoslist '). Show ();
});
</script>
<script type= "Text/javascript" >
$ (' #sdatahos '). Hide ();
$ (' #hoslist '). Hide ();
$ (' #allmap '). Hide ();
</script>

Baidu Map API display multiple labeling points and add Baidu Style Search window