Note: 1, need to introduce: jquery-1.7.1.min.js
2, in the case of a network can be tested, because the introduction of Baidu map address
CSS Styles for maps:
@charset "Utf-8";
/* CSS Document */
. Map{width:800px;height:404px;text-align:center;float:left;overflow:hidden;}
. map_left{width:601px;float:left;height:380px;border:2px solid #afafaf;}
. map_right{width:193px;float:right;height:380px;border:1px solid #ccc;}
. Map_right_bg{width:193px;background: #e4ecf9; height:20px;}
. Map_right_top{width:193px;text-align:center;}
. map_right_top_left{float:left;width:90px;height:30px;}
. map_right_top_right{float:right; text-align:left;height:30px;width:90px;}
. map_right_search{width:193px;}
. map_right_search_left{}
. map_right_search_right{}
. Map_right_result{width:193px;text-align:left;}
Main interface Code:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<title> mark the location of the restaurant </title>
<link rel= "stylesheet" type= "Text/css" href= "Mark_map.css"/>
<script type= "Text/javascript" src= "Jquery-1.7.1.min.js" ></script>
<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=1.2" ></script>
<script type= "Text/javascript" src= "Http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js" > </script>
<script type= "Text/javascript" src= "Http://api.map.baidu.com/library/MarkerTool/1.2/src/MarkerTool_min.js" ></script>
<style type= "Text/css" >
. desc{width:100%;hieght:25px;margin:0;padding 0;}
. Citylist{height:320px;width:372px;overflow-y:auto;}
. sel_container{position:absolute;top:0;font-size:12px;}
. map_popup {position:absolute;z-index:200000;width:382px;height:344px;top:20px;}
. map_popup. popup_main {background: #fff; border:1px solid #8BA4D8; height:100%;overflow:hidden;position:absolute; Width:100%;z-index:2;}
. map_popup. Title {Background:url ("http://map.baidu.com/img/popup_title.gif") repeat scroll 0 0 transparent;
Color: #6688CC; font-size:12px;font-weight:bold;height:24px;line-height:25px;padding-left:7px;}
. map_popup button {background:url ("http://map.baidu.com/img/popup_close.gif") no-repeat scroll 0 0 transparent;
Border:0 none;cursor:pointer;height:12px;position:absolute;right:4px;top:6px;width:12px;}
</style>
<body>
<div>
<div id= "desc" >
<span class= "Titleclass" > Label location </span> (click the Labeling button to the right of the map and label it on the map)
</div>
<div class= "Map" >
<div class= "Map_left" id= "container" ></div>
<div class= "Map_right" >
<div class= "MAP_RIGHT_BG" ></div>
<div class= "Map_right_top" >
<div class= "Map_right_top_left" ><strong id= "curcity" > Beijing </strong></div>
<div class= "Map_right_top_right" >
[<a id= "Curcitytext" href= "javascript:void (0)" > Replace city </a>]
</div>
<div class= "Map_popup" id= "CityList" style= "display:none;text-align:left;" >
<div class= "Popup_main" >
<div class= "title" > City list </div>
<div class= "CityList" id= "Citylist_container" ></div>
<button id= "Popup_close" ></button>
</div>
</div>
</div>
<div class= "Map_right_search" >
<input type= "text" id= "search" style= "width:120px;"/>
<input type= "button" onclick= "Search ()" value= "Searching"/>
</div>
<div class= "Map_right_result" style= "Height:280px;overflow:auto;" >
<div id= "Results" style= "font-size:13px;margin-top:10px;" ></div>
</div>
<div style= "WIDTH:193PX;" >
<input type= "button" value= "callout" onclick= "Mkrtool.open ()"/>
<input type= "hidden" id= "LNG" value= "<s:property value=" #session. Res_session.get (\ ' longitude\ ') '/> '/>
<input type= "hidden" id= "lat" value= "<s:property value=" #session. Res_session.get (\ ' latitude\ ') '/> '/>
</div>
</div>
</div>
</div>
<script type= "Text/javascript" >
New Map Creation
var ox=parsefloat ($ ("#lng"). Val ());
var oy=parsefloat ($ ("#lat"). Val ());
var map = new Bmap.map ("container");
var point;
if (ox>0) {
Point = new Bmap.point (ox, OY);
}else{
Point = new Bmap.point (116.404, 39.915);
}
Map.centerandzoom (Point, 15);
Map.enablescrollwheelzoom ();
var mkrtool = new Bmaplib.markertool (map, {autoclose:true, Followtext: "Add Callout"});
Map.addeventlistener ("click", Function (e) {
if (mkrtool._isopen==true) {
var lng=$ ("#lng"). Val ();
var x=e.point.lng;
var Y=e.point.lat;
if (lng.length>0) {
if (Window.confirm ("You have already labeled it, make sure to modify it.") ")){
Markmap (x, y);
}else{
Alert ("You chose to give up");
Mkrtool.close ();
}
}else{
Markmap (x, y);
}
}
});
function Markmap (x, y) {
$.post ("Restaurantaction!resmapmark.do", {posx:x,posy:y},function (data) {
if ("Success" ==$.trim (data)) {
Alert ("Marked success");
}else{
Alert ("label failed");
}
}, ' text ');
}
Create a CityList object and place it inside the Citylist_container node
var mycl = new Bmaplib.citylist ({container: "Citylist_container", Map:map});
Add related actions when clicking on a city
Mycl.addeventlistener ("Cityclick", function (e) {
Modify the current city display
document.getElementById ("Curcity"). InnerHTML = E.name;
Hide City list after clicking
document.getElementById ("CityList"). Style.display = "None";
});
Add a click action to the "Change City" link
document.getElementById ("Curcitytext"). onclick = function () {
var cl = document.getElementById ("CityList");
if (Cl.style.display = = "None") {
Cl.style.display = "";
} else {
Cl.style.display = "None";
}
};
Add a click action to the Close button on the city list
document.getElementById ("Popup_close"). onclick = function () {
var cl = document.getElementById ("CityList");
if (Cl.style.display = = "None") {
Cl.style.display = "";
} else {
Cl.style.display = "None";
}
};
var local = new Bmap.localsearch (map, {
Renderoptions: {map:map, Panel: "Results"},
Pagecapacity:8
});
function Search () {
var area=$ (' #search '). Val ();
Local.search (area);
}
</script>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
