Home > Web Front-end > JS Tutorial > Add Baidu map coordinate picking attention process in jquery boxy_jquery

Add Baidu map coordinate picking attention process in jquery boxy_jquery

WBOY
Release: 2016-05-16 16:53:35
Original
1322 people have browsed it

As a beginner in development, this thing is only used as a personal backup. It would be nice if it can help (I use php for development, but it is js, which does not have much impact)

A few issues should be explained here :

1. The "script" tag cannot appear in the page called by boxy, otherwise it cannot be displayed

2. When calling boxy, pay attention to the process. You must first load boxy and then render the map. In the boxy page

3. The loading js of Baidu map should be placed in the page where the boxy pops up

Note the process: the boxy page is actually a separate page and just uses $.get in ajax ('/index.php?r=comm/map_coordinate', function(data){} method to call the page

key trigger js as follows:

Copy the code The code is as follows:

(function(){
$(document).ready(function() {

$( "#Mechine_mec_points").click(function(){

__MC.Map_coordinate.getcorrdinate();

});
});

__MC.Map_coordinate = {
getcorrdinate:function(){

$.get('/index.php?r=comm/map_coordinate', function(data){ //Calling the page corresponding to boxy, the page There is only one div with id=allmap



new Boxy(data,{ //The js of Baidu Map AIP has been loaded outside
'title':'Map coordinate picking',
'modal':true,
'draggable':false,
'unloadOnHide' : true,
'afterShow' : function(){


var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(106.566872, 29.536861), 17);
map.enableScrollWheelZoom(); //Enable scroll wheel zooming, disabled by default
map.enableContinuousZoom(); //Enable map inertial drag, disabled by default
function showInfo(e){
$("#Mechine_mec_points").val(e.point.lng ", " e.point .lat);
}
map.addEventListener("click", showInfo);

}//aftershow ends
});

return false;
});

},
}
})();
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template