<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Labeling Points </title>
<style type= "Text/css" >
* {
margin:0;
padding:0;
List-style-type:none;
}
A, img {
border:0;
}
Body {
font:12px/180% Arial, Helvetica, Sans-serif, "new song Body";
}
. demo {
width:850px;
margin:20px Auto;
}
#l-map {
height:400px;
width:600px;
Float:left;
border:1px solid #bcbcbc;
}
#r-result {
height:400px;
width:230px;
Float:right;
}
HTML, Body {
margin:0;
padding:0;
}
. iw_poi_title {
Color: #CC5522;
font-size:14px;
Font-weight:bold;
Overflow:hidden;
padding-right:13px;
White-space:nowrap;
}
. iw_poi_content {
FONT:12PX Arial,sans-serif;
overflow:visible;
padding-top:4px;
White-space:-moz-pre-wrap;
Word-wrap:break-word;
}
. btnbz {
Text-align:center;
}
</style>
<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=1.4" ></script>
<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></ Script>
<script type= "Text/javascript" >
function msg (print) {
var objprint = print;
var objcity = document.getElementById ("txtcity");
if (Confirm ("Is it OK to label the current coordinate point position as:" + Objcity.value + "?) ")) {
Alert ("OK");
}
}
</script>
<body>
<div class= "Demo" >
<p style= "height:40px;" >
Enter City: <input id= "txtcity" type= "text"/>
<button> Get coordinates </button>
Coordinates: <input id= "Txtpoint" type= "text"/>
</p>
<div id= "L-map" ></div>
<div id= "R-result" ></div>
</div>
<script type= "Text/javascript" >
Baidu Map API Features
var map = new Bmap.map ("L-map"); Create a Map instance
Map.centerandzoom (New Bmap.point (114.465567, 22.607958), 17);
Addmapcontrol ();
Setmapevent ();
var icon = new Bmap.icon (' Pin.png ', New Bmap.size (20, 32), {});
var MKR;
function Zoomcontrol () {
Default docking position and offset
This.defaultanchor = Bmap_anchor_top_right;
This.defaultoffset = new Bmap.size (10, 10);
}
Inherit from Bmap.control with JavaScript's prototype property
Zoomcontrol.prototype = new Bmap.control ();
The custom control must implement its own initialize method and return the DOM element of the control
Create a DIV element in this method as a container for the control and add it to the map container
ZoomControl.prototype.initialize = function (map) {
Create a DOM element
var div = document.createelement ("div");
Add text description
Div.appendchild (document.createTextNode ("callout"));
Set style
Div.style.cursor = "pointer";
Div.style.border = "1px solid gray";
Div.style.backgroundColor = "White";
Div.style.color = "Red";
Binding events
Div.onclick = function Show (e) {
if (MKR = = null) {
MKR = new Bmap.marker (Map.getcenter (), {
Icon:icon,
enabledragging:true,//Turn on Drag effect
raiseondrag:true//Turn on Drag effect
});
Map.addoverlay (MKR);
}
else {
Map.removeoverlay (MKR);
MKR = new Bmap.marker (Map.getcenter (), {
Icon:icon,
enabledragging:true,//Turn on Drag effect
raiseondrag:true//Turn on Drag effect
});
Map.addoverlay (MKR);
}
Monitor drag position and display to text box
Mkr.addeventlistener (' Dragend ', function Show1 (e) {//listen to drag position
Alert (e.point.lng + ', ' + E.point.lat);
document.getElementById ("Txtpoint"). Value = E.point.lng + "," + e.point.lat;//click on map to display latitude to text
var varprint = e.point.lng + ', ' + E.point.lat;
var Infowindow = new Bmap.infowindow ("<b class= ' iw_poi_title ' title= ' current position coordinates ' > current position coordinates </b><div class= ' iw_ Poi_content ' > Coordinates address: ' + e.point.lng + ', ' + E.point.lat + ' <br/> input name: <input type= ' text ' id= ' txtcity '/><d IV class= ' BTNBZ ' ><input type= ' button ' value= ' Create callout point ' onclick= ' msg (); ' /></div></div> ");
Map.openinfowindow (Infowindow, e.point); Open Information window
})
}
Adding DOM elements to the map
Map.getcontainer (). appendchild (Div);
Returns the DOM element
return div;
}
Creating controls
var Myzoomctrl = new Zoomcontrol ();
Add to map
Map.addcontrol (Myzoomctrl);
var local = new Bmap.localsearch ("national", {
Renderoptions: {
Map:map,
Panel: "R-result",
Autoviewport:true,
Selectfirstresult:false
}
});
Map Event Settings function:
function Setmapevent () {
Map.enabledragging ();//enable map drag events, enabled by default (can not be written)
Map.enablescrollwheelzoom ();//enable map wheel Zoom Out
Map.enabledoubleclickzoom ();//enable mouse double-click to zoom in, enabled by default (can not write)
Map.enablekeyboard ();//enable keyboard to move the map up or down
}
Add a function to the map control:
function Addmapcontrol () {
Add a zoom control to a map
var ctrl_nav = new Bmap.navigationcontrol ({anchor:bmap_anchor_top_left, type:bmap_navigation_control_large});
Map.addcontrol (Ctrl_nav);
Add a thumbnail control to your map
var ctrl_ove = new Bmap.overviewmapcontrol ({anchor:bmap_anchor_bottom_right, isopen:0});
Map.addcontrol (Ctrl_ove);
Add a scale bar control to a map
var Ctrl_sca = new Bmap.scalecontrol ({anchor:bmap_anchor_bottom_left});
Map.addcontrol (CTRL_SCA);
}
Click the button "get coordinates" to generate the event
function GetPoint () {
var city = document.getElementById ("txtcity"). Value;
Local.search (city); Initialize the map to set the city and map levels.
Enable wheel zoom in and zoom out
}
</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
