Baidu Map API Add custom Callout multipoint callout

Original: Baidu Map API Add custom Callout multipoint callout

Divided into four files location.php map.css picture database Database Configuration Change------------------------------------------------------------  Gorgeous split-line-----------------------------------------------------location.php Master File

<link rel= "stylesheet" type= "Text/css" href= "Map.css" ><?php$config=mysql_connect ("localhost", "root", " Root "), mysql_select_db (" Baidu_map "), mysql_query (" Set names UTF8 "), $query =mysql_query (" SELECT * from Location "), $sql _num=mysql_num_rows ($query); while ($rows =mysql_fetch_array ($query)) { $rows _latitude[]= $rows [' latitude ']; Longitude $rows_longitude[]= $rows [' Longitude ']; Latitude $rows_store_name[]= $rows [' store_name ']; Store name $rows_info[]= $rows [' info ']; More Information}?>
<style type= "Text/css" >body{margin:0px;padding:0px} #container { height:480px; width:750px; margin-top:15px; margin-bottom:15px; border:1px solid #E9E7D4;}. bmap_bubble_content {font-size:12px;} </style><script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=1.3" ></script>< Script>function Visitmap (Thearea) { Switch (Thearea) { Case "01": Map.centerandzoom (New Bmap.point (119.2689127612,26.0497002276), 14)//Cangshan Break Case "02": Map.centerandzoom (New Bmap.point (119.32851499999992,26.082105), 14)//Jinan District Break Case "03": Map.centerandzoom (New Bmap.point (119.304217,26.082593), 14)//Gulou District Break Case "04": Map.centerandzoom (New Bmap.point (119.314123,26.052837), 14)//Taijiang Break Case "05": Map.centerandzoom (New Bmap.point (119.45558900000005,25.9962505191156), 14)//Mawei Break }}</script>
      <div class= "White_container" >
Map.addcontrol (New Bmap.navigationcontrol ());    Scale Map.enablescrollwheelzoom ();    Enable the scroll wheel to zoom out, disable Map.enablecontinuouszoom () by default;      Enable map inertia drag, default disable Map.addcontrol (new Bmap.maptypecontrol ());    Toggle Map Type Map.enablecontinuouszoom ();　Turn on continuous zoom effect map.enableinertialdragging (); Turn on the inertia drag effect


var icon = new Bmap.icon (' Fblogo.png ', New Bmap.size (), {anchor:new bmap.size (43, 38)});//define Icon
Write a custom function that creates the callout function Addmarker (point,info,title) {var marker = new Bmap.marker (Point,{icon:icon}); var rows_title=eval (<?php Echo json_encode ($rows _store_name);?  >); var opts = {width:200,//Information window width height:50,//Information window height Title:title,//Information window title} var Infowindow = n  EW Bmap.infowindow (info,opts,{offset:new bmap.size ( -5,-20)});  Create an Information Window object Map.addoverlay (marker);  Marker.addeventlistener ("click", Function () {This.openinfowindow (Infowindow); Map.zoomin ();});  Marker.setlabel (New Bmap.label (Title,{offset:new bmap.size (43,0)})); }
Add labels to the map var rows_latitude=eval (<?php Echo json_encode ($rows _latitude);? >) var rows_longitude=eval (<?php Echo json_encode ($rows _longitude);? >) var rows_store_name=eval (<?php Echo json_encode ($rows _store_name);? >) var rows_info=eval (<?php Echo json_encode ($rows _info);? >); for (var i = 0; i < <?php echo $sql _num;? >;  i + +) {var point = new Bmap.point (Rows_latitude[i], rows_longitude[i]); Addmarker (Point,rows_info[i],rows_store_name[i]);}






function G (ID) {return document.getElementById (ID);}

var ac = new Bmap.autocomplete (//Create an auto-complete object {"Input": "Suggestid", "Location": Map});
Ac.addeventlistener ("Onhighlight", function (e) {//Mouse on drop-down list of events var str = "";    var _value = E.fromitem.value;    var value = ""; if (E.fromitem.index >-1) {value = _value.province + _value.city + _value.district + _value.street + _valu    e.business;        } str = "fromitem<br/>index =" + E.fromitem.index + "<br/>value =" + value;    Value = "";        if (E.toitem.index >-1) {_value = E.toitem.value;    Value = _value.province + _value.city + _value.district + _value.street + _value.business;    } str + = "<br/>toitem<br/>index =" + E.toitem.index + "<br/>value =" + value; G ("Searchresultpanel"). InnerHTML = str;});
var myvalue;ac.addeventlistener ("Onconfirm", function (e) {//mouse click on the drop-down list after the event var _value = E.item.value; MyValue = _value.province + _value.city + _value.district + _value.street + _value.business;//G ("SearchResultPanel    "). InnerHTML =" onconfirm<br/>index = "+ E.item.index +" <br/>myvalue = "+ myvalue;        G ("Searchresultpanel"). InnerHTML =myvalue; Setplace ();});

function Setplace () {//Map.clearoverlays ();    Clears all overlays on the map function myfun () {var pp = local.getresults (). Getpoi (0). Point;    Get the results of the first Smart Search map.centerandzoom (PP, p);//Map.addoverlay (New Bmap.marker (PP));    Add Callout} var local = new Bmap.localsearch (map, {//Smart search Onsearchcomplete:myfun}); Local.search (myvalue);}
</script>




------------------------------------------------------------  Gorgeous split-line-----------------------------------------------------CSS Styles
@charset "Utf-8";/* CSS Document */.white_container { font-size:12px; width:975px; padding-left:10px;}.    White_container H2 {color: #78326E; font-family: "Arial Black", Gadget, Sans-serif; font-size:25px;    Font-weight:bold;    Margin:0.3em 0; Text-rendering:optimizelegibility}.white_container h4 { margin:0; line-height:20px;}. White_container option {Border:none;}
#searchResultPanel {display:none;} #suggestId { Background:none Repeat scroll 0 0 #F3FCFF;    Border-color: #7FD8F5;    Border-style:solid;    border-width:1px; PADDING:4PX 10px; width:400px; margin-top:2px; } #r-result { margin-bottom:15px; margin-top:10px;} . h4title {font-size:13px; margin-bottom:5px;}. flyaddress { Background:none Repeat scroll 0 0 #F3FCFF;    Border-color: #7FD8F5;    Border-style:solid;    border-width:1px; padding:10px; min-width:250px; margin-top:2px; }.sub_heading{ border-bottom:1px solid #D5D4D5;    Color: #4C6E84;    font-size:16px;    Font-weight:bold;    line-height:1.7;    margin-bottom:20px; padding-bottom:6px; width:750px;}

------------------------------------------------------------  Gorgeous split-line-----------------------------------------------------Database files
CREATE TABLE ' location ' (' id ' int (ten) NOT null auto_increment, ' latitude ' varchar (30) ' is not null, ' longitude ' varchar ) not NULL, ' address ' varchar (255) Character Set GBK not null, PRIMARY KEY (' id ')) engine=innodb auto_increment=4 Defau LT charset=latin1;

Insert INTO ' location ' values (' 1 ', ' 119.298974 ', ' 26.06724929 ', ' baolong City Plaza a '), insert INTO ' location ' values (' 2 ', ' 119.3071 71 ', ' 26.070835 ', ' bo Mei Poetry State '); INSERT into ' Location ' VALUES (' 3 ', ' 119.317156\r\n ', ' 26.058129 ', ' Zhong Ting Jie Wei Wei ');

------------------------------------------------------------  Gorgeous split-line-----------------------------------------------------Image

Baidu Map API Add custom Callout multipoint callout