Baidu Map API Advanced Tutorial-instance high-level operation 8.html

<! DOCTYPE Html>"Content-type"Content="text/html; Charset=utf-8"/><title>16.1</title> <script type=text/javascript src=http://fw.qq.com/ipaddress></script><script type="Text/javascript">varIscreatr =false;//whether to create    varMap//Baidu Map    varMarker//Callout    varMarkX;//Callout x    varMarkY;//Callout y//Loading map Callbacksfunction Initialize () {//---------------------------------------------Basic Example---------------------------------------------Map =NewBmap.map ("Allmap", {minzoom: A, Maxzoom: -});//Create a Map instance//Map.centerandzoom (New Bmap.point (116.4035,39.915), 15); //when initializing, you can set the center point and map zoom level. Map.centerandzoom ("Chengdu", -);//initializes the map, setting the center point coordinates and the map level. Map.enablescrollwheelzoom (true);//Mouse Slide wheel can scrollMap.addeventlistener ("Click", Function (e) {if(Iscreatr = =true)return; //---------------------------------------------Create a callout---------------------------------------------Iscreatr =true; MarkX=e.point.lng; MarkY=E.point.lat; varPoint =NewBmap.point (E.POINT.LNG, E.point.lat);//default//Create a callout object and add it to the mapMarker =NewBmap.marker (point); varLabel =NewBmap.label ("I was able to drag, right-click to cancel the", {offset:NewBmap.size ( -, -Ten) });            Marker.setlabel (label) map.addoverlay (marker);    Marker.enabledragging (); //can be dragged and pulledMarker.addeventlistener ("Dragend", function (e) {//Callout Drag EventsMarkX =e.point.lng; MarkY=E.point.lat; document.getElementById ("R-result"). InnerHTML = e.point.lng +", "+ E.point.lat;//Print drag end coordinates            });        }); //---------------------------------------------the right mouse button to cancel the label operation---------------------------------------------        varmenu =NewBmap.contextmenu ();//Right-click menu        varTxtmenuitem = [//Right-click menu item{text:'Cancel', Callback:function () {map.removeoverlay (marker); Iscreatr=false;        }}        ];  for(vari =0; i < txtmenuitem.length; i++) {Menu.additem (NewBmap.menuitem (Txtmenuitem[i].text, Txtmenuitem[i].callback, -));//Menu Add Item} map.addcontextmenu (menu); } function Loadscript () {varScript = Document.createelement ("Script"); SCRIPT.SRC="http://api.map.baidu.com/api?v=1.4&callback=initialize";    Document.body.appendChild (script); } window.onload=Loadscript; //-------------------------------------    //Toggle Mapfunction ChangeType (value) {map.setcenter (value); }    //Submitfunction Submit () {if(Iscreatr = =true) {alert (MarkX+":"+MarkY); }    }</script>"R-result"style="float:left;width:100px;"> Print coordinates </div> <div id="Allmap"style="float:left;width:800px; height:500px"></div> <div id="R-result"style="float:left;width:100px;"> <input type="Button"onclick="Submit ()"Value="Submit"/></br>Switch Cities:<SelectOnchange="changetype (this.value)"> <option value ="Beijing"> Beijing </option> <option value ="Guangzhou"> guangzhou </option> <option value="Chengdu"> Chengdu </option> </Select> </div></body><script type="Text/javascript">//move to a point Map.panto (new Bmap.point (116.409, 39.918)); //move to a city of Map.setcenter ("Guangzhou"); //move to Guangzhou in two seconds//Map.setzoom (14); //put it down to level 14 .</script>

Baidu Map API Advanced Tutorial-instance high-level operation 8.html