Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/visual-studio-2008/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 当现有的google标记移动到另一个地方时,如何更新新的纬度和经度_Javascript_Php_Mysql_Google Maps - Fatal编程技术网

Javascript 当现有的google标记移动到另一个地方时,如何更新新的纬度和经度

Javascript 当现有的google标记移动到另一个地方时,如何更新新的纬度和经度,javascript,php,mysql,google-maps,Javascript,Php,Mysql,Google Maps,我正在使用谷歌地图在地图上放置标记。标记的gps坐标存储在mySQL数据库中。我已经能够在地图上创建标记,因此我想知道,当现有标记移动到另一个地方时,如何使用新的纬度和经度更新数据库。这是我目前的代码: 现场工作: $(文档).ready(函数(){ var mapCenter=new google.maps.LatLng(23.721869,90.390518);//谷歌地图 协调 var映射; map_initialize();//初始化谷歌地图 //###############谷歌地图

我正在使用谷歌地图在地图上放置标记。标记的gps坐标存储在mySQL数据库中。我已经能够在地图上创建标记,因此我想知道,当现有标记移动到另一个地方时,如何使用新的纬度和经度更新数据库。这是我目前的代码:

现场工作:


$(文档).ready(函数(){
var mapCenter=new google.maps.LatLng(23.721869,90.390518);//谷歌地图
协调
var映射;
map_initialize();//初始化谷歌地图
//###############谷歌地图初始化##############
函数映射_初始化()
{
变量googleMapOptions=
{ 
中心:地图中心,//地图中心
缩放:15,//缩放级别,0=地球视图到更高的值
最大缩放:15,
minZoom:5,
ZoomControl选项:{
样式:google.maps.ZoomControlStyle.SMALL//缩放控件大小
},
scaleControl:true,//启用缩放控制
mapTypeId:google.maps.mapTypeId.ROADMAP//google地图类型
};
map=new google.maps.map(document.getElementById(“google_-map”),
谷歌地图选项);
//从XML文件中加载标记,检查(map_process.php)
$.get(“map\u process.php”,函数(数据){
$(数据)。查找(“标记”)。每个(函数(){
var name=$(this.attr('name');
var address=''+$(this.attr('address')+'

'; var type=$(this.attr('type'); var point=new google.maps.LatLng(parseFloat($(this.attr('latitude')),parseFloat($(this.attr('longitude')); 创建_标记(点、名称、地址、假、假、假,“icons/blue icon.png”); }); }); //右键单击以放置新标记 google.maps.event.addListener(映射,'右键单击',函数(事件){ //编辑要使用新标记显示的表单 var EditForm=''+ ''+ '地名:'+ '说明:'+ '类型:RastaurantBar'+ “房子”+ ''+ “

保存标记详细信息”; //在编辑表单中删除一个新标记 创建_标记(event.latLng,‘New marker’,EditForm,true,true,true,“icons/pin_green.png”); }); } //###############创建标记函数############## 函数create_marker(MapPos、MapTitle、MapDesc、InfoOpenDefault、可拖动、可移动、iconPath) { //新标记 var marker=new google.maps.marker({ 位置:MapPos,, 地图:地图, 真的, 动画:google.maps.animation.DROP, 标题:“你好,世界!”, 图标:iconPath }); //标记信息窗口的内容结构 var contentString=$(“”+ ''+ ''+MapTitle+''+ MapDesc+ “删除标记”+ ''); //创建一个信息窗口 var infowindow=new google.maps.infowindow(); //设置infoWindow的内容 setContent(contentString[0]); //在信息窗口中查找删除按钮 var removeBtn=contentString.find('button.remove marker')[0]; var saveBtn=contentString.find('button.save marker')[0]; //添加单击列表以删除标记按钮 google.maps.event.addDomListener(removeBtn,“单击”,函数(事件){ 移除_标记(标记); }); if(typeof saveBtn!==“undefined”)//仅当存在“保存”按钮时才继续 { //添加单击列表以保存标记按钮 google.maps.event.addDomListener(saveBtn,“单击”,函数(事件){ var mReplace=contentString.find('span.info content');//成功后要替换的html var mName=contentString.find('input.save name')[0]。value;//name输入字段值 var mDesc=contentString.find('textarea.save desc')[0]。值;//说明输入字段值 var mType=contentString.find('select.save type')[0]。value;//标记的类型 如果(mName=''| | mDesc='') { 警报(“请输入名称和说明!”); }否则{ save_marker(marker,mName,mDesc,mType,mReplace);//调用save marker函数 } }); } //添加单击列表以保存标记按钮 google.maps.event.addListener(标记'click',函数(){ 打开(地图,标记);//点击标记打开信息窗口 }); if(InfoOpenDefault)//默认情况下是否打开信息窗口 { 信息窗口。打开(地图、标记); } } //###############删除标记功能############## 功能删除_标记(标记) { /*确定标记是否可拖动 新标记是可拖动的,保存的标记是固定的*/ //使用jQuery Ajax从数据库和映射中删除保存的标记 var mLatLang=Marker.getPosition().toUrlValue();//获取标记位置 var myData={del:'true',latlang:mLatLang};//post变量 $.ajax({ 类型:“POST”, url:“map_process.php”, 数据:myData, 成功:功能(数据){ Marker.setMap(空); 警报(数据); }, 错误:函数(xhr、ajaxOptions、thrownError){ 警报(thrownError);//抛出任何错误 } }); } //###############保存标记功能############## 功能保存标记(标记、mName、mAddress、mType、replaceWin) { //使用jqueryajax保存新标记 var mLatLang=Marker.getPosition().toUrlValue();//获取标记位置 var myData={name:mName,address:mAddress,latlang:mLatLang,type:mType};//post变量 console.log(replaceWin); $.ajax({ 类型:“POST”, url:“map_process.php”, 数据:myData, 成功:功能(数据){ replaceWin.html(数据);//用新的html替换信息窗口 Marker.setDraggable(true);//将Marker设置为fixed Marker.setIcon('icons/blue icon.png');//替换图标 }, 错误:funct
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api   
/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function() {

var mapCenter = new google.maps.LatLng(23.721869, 90.390518); //Google map 
Coordinates
var map;

map_initialize(); // initialize google map

//############### Google Map Initialize ##############
function map_initialize()
{
var googleMapOptions = 
{ 
    center: mapCenter, // map center
zoom: 15, //zoom level, 0 = earth view to higher value
maxZoom: 15,
minZoom: 5,
zoomControlOptions: {   
    style: google.maps.ZoomControlStyle.SMALL //zoom control size
},
scaleControl: true, // enable scale control             
mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
};

map = new google.maps.Map(document.getElementById("google_map"), 
googleMapOptions);          

//Load Markers from the XML File, Check (map_process.php)
$.get("map_process.php", function (data) {
$(data).find("marker").each(function () {
var name        = $(this).attr('name');
var address     = '<p>'+ $(this).attr('address') +'</p>';
var type        = $(this).attr('type');
var point   = new google.maps.LatLng(parseFloat($(this).attr('latitude')),parseFloat($(this).attr('longitude')));
                  create_marker(point, name, address, false, false, false, "icons/blue-icon.png");
            });
        }); 

        //Right Click to Drop a New Marker
        google.maps.event.addListener(map, 'rightclick', function(event) {
            //Edit form to be displayed with new marker
            var EditForm = '<p><div class="marker-edit">'+
            '<form action="ajax-save.php" method="POST" name="SaveMarker" id="SaveMarker">'+
            '<label for="pName"><span>Place Name :</span><input type="text" name="pName" class="save-name" placeholder="Enter Title" maxlength="40" /></label>'+
            '<label for="pDesc"><span>Description :</span><textarea name="pDesc" class="save-desc" placeholder="Enter Address" maxlength="150"></textarea></label>'+
            '<label for="pType"><span>Type :</span> <select name="pType" class="save-type"><option value="restaurant">Rastaurant</option><option value="bar">Bar</option>'+
            '<option value="house">House</option></select></label>'+
            '</form>'+
            '</div></p><button name="save-marker" class="save-marker">Save Marker Details</button>';

            //Drop a new Marker with our Edit Form
            create_marker(event.latLng, 'New Marker', EditForm, true, true, true, "icons/pin_green.png");
        });

}

//############### Create Marker Function ##############
function create_marker(MapPos, MapTitle, MapDesc,  InfoOpenDefault, DragAble, Removable, iconPath)
{                 


    //new marker
    var marker = new google.maps.Marker({
        position: MapPos,
        map: map,
        draggable:true,
        animation: google.maps.Animation.DROP,
        title:"Hello World!",
        icon: iconPath
    });

    //Content structure of info Window for the Markers
    var contentString = $('<div class="marker-info-win">'+
    '<div class="marker-inner-win"><span class="info-content">'+
    '<h1 class="marker-heading">'+MapTitle+'</h1>'+
    MapDesc+ 


    '</span><button name="remove-marker" class="remove-marker" title="Remove Marker">Remove Marker</button>'+       
    '</div></div>');    




    //Create an infoWindow
    var infowindow = new google.maps.InfoWindow();
    //set the content of infoWindow
    infowindow.setContent(contentString[0]);

    //Find remove button in infoWindow
    var removeBtn   = contentString.find('button.remove-marker')[0];
    var saveBtn     = contentString.find('button.save-marker')[0];

    //add click listner to remove marker button
    google.maps.event.addDomListener(removeBtn, "click", function(event) {
        remove_marker(marker);
    });

    if(typeof saveBtn !== 'undefined') //continue only when save button is present
    {
        //add click listner to save marker button
        google.maps.event.addDomListener(saveBtn, "click", function(event) {
            var mReplace = contentString.find('span.info-content'); //html to be replaced after success
            var mName = contentString.find('input.save-name')[0].value; //name input field value
            var mDesc  = contentString.find('textarea.save-desc')[0].value; //description input field value
            var mType = contentString.find('select.save-type')[0].value; //type of marker

            if(mName =='' || mDesc =='')
            {
                alert("Please enter Name and Description!");
            }else{
                save_marker(marker, mName, mDesc, mType, mReplace); //call save marker function
            }
        });
    }

    //add click listner to save marker button        
    google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker); // click on marker opens info window 
    });

    if(InfoOpenDefault) //whether info window should be open by default
    {
      infowindow.open(map,marker);
    }
}

//############### Remove Marker Function ##############
function remove_marker(Marker)
{

    /* determine whether marker is draggable 
    new markers are draggable and saved markers are fixed */

        //Remove saved marker from DB and map using jQuery Ajax
        var mLatLang = Marker.getPosition().toUrlValue(); //get marker position
        var myData = {del : 'true', latlang : mLatLang}; //post variables
        $.ajax({
          type: "POST",
          url: "map_process.php",
          data: myData,
          success:function(data){
                Marker.setMap(null); 
                alert(data);
            },
            error:function (xhr, ajaxOptions, thrownError){
                alert(thrownError); //throw any errors
            }
        });


}

//############### Save Marker Function ##############
function save_marker(Marker, mName, mAddress, mType, replaceWin)
{
    //Save new marker using jQuery Ajax
    var mLatLang = Marker.getPosition().toUrlValue(); //get marker position
    var myData = {name : mName, address : mAddress, latlang : mLatLang, type : mType }; //post variables
    console.log(replaceWin);        
    $.ajax({
      type: "POST",
      url: "map_process.php",
      data: myData,
      success:function(data){
            replaceWin.html(data); //replace info window with new html
            Marker.setDraggable(true); //set marker to fixed
            Marker.setIcon('icons/blue-icon.png'); //replace icon
        },
        error:function (xhr, ajaxOptions, thrownError){
            alert(thrownError); //throw any errors
        }
    });
}

function update_marker(Marker, mName, mAddress, mType, replaceWin)
{
    //Save new marker using jQuery Ajax
    var mLatLang = Marker.getPosition().toUrlValue(); //get marker position
    var myData = {name : mName, address : mAddress, latlang : mLatLang, type : mType }; //post variables
    console.log(replaceWin);        
    $.ajax({
      type: "POST",
      url: "map_update.php",
      data: myData,
      success:function(data){
            replaceWin.html(data); //replace info window with new html
            Marker.setDraggable(true); //set marker to fixed
            Marker.setIcon('icons/blue-icon.png'); //replace icon
        },
        error:function (xhr, ajaxOptions, thrownError){
            alert(thrownError); //throw any errors
        }
    });
}   

});
</script>