Загрузить маркеры из базы данных mysql и отобразить их как маркеры на картах Google

Я использую телефонную разборку, и у меня есть карта google, которая находит пользователя и помещает маркер на карту. То, что я хочу сделать, - это маркеры загрузки из базы данных mysql, которая содержит lat и длинные данные для каждого места. Должен ли я делать это через php и ajax? Это код, который у меня есть на данный момент. БлагодаряЗагрузить маркеры из базы данных mysql и отобразить их как маркеры на картах Google

<html> 

    <head> 

<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<title>Test</title> 
<link rel="stylesheet" href="/master.css" type="text/css" media="screen" /> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
<script type="text/javascript"> 

function onLoad() { 
document.addEventListener("deviceready", onDeviceReady, false); 
} 

function onDeviceReady() { 
    navigator.geolocation.getCurrentPosition(onSuccess, onError,{'enableHighAccuracy':false,'timeout':10000}); 

} 

//GEOLOCATION 
var onSuccess = function(position) { 


    var myLat = position.coords.latitude; 
    var myLong = position.coords.longitude; 
    var myLatlng = new google.maps.LatLng(myLat, myLong); 

    //MAP 
    var mapOptions = { 
     center: new google.maps.LatLng(myLat, myLong), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map_canvas"), 
            mapOptions); 

    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title:"Hello World!" 
    }); 


}; 

// onError Callback receives a PositionError object 
// 
function onError(error) { 
    alert('code: ' + error.code + '\n' + 
      'message: ' + error.message + '\n'); 
} 


    </script> 
    </head> 
    <body onload="onLoad()"> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
    </body> 
    </html>

источник

2013-12-03 codingman

Определить карту

var map;

Initialize карта:

function initialize(lat,lng, n) { //BY PASSING LATITUDE (lat), LONGITUDE (lng) AND THE TEXT (n) WILL SET A DEFAULT MARKER 
    var mapOptions = { 
     scaleControl: true, 
     center: new google.maps.LatLng(lat, lng), 
     zoom: 14, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

    var marker = new google.maps.Marker({ 
     map: map, 
     position: map.getCenter() 
    }); 
    var infowindow = new google.maps.InfoWindow(); 
    infowindow.setContent('<b>ا'+n+'</b>'); 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map, marker); 
    }); 
}

вызов этой функции в устройстве готовой функции. Вы можете передать текущий лат, долго-

var myLat = position.coords.latitude; 
var myLong = position.coords.longitude;

индивидуального вызова Ajax запрос и получить данные о местоположении с сервера. Вставить все широты и долготы в массиве местоположений в пределах вашего запроса Ajax успеха и setMarkers вызова метода

var loc_array = new Array(); //LOCATION ARRAY 
$.each(server_response_array, function(i,v){ 
    loc_array[i] = [v.lat, v.lng, v.temp_txt]; 
} 
setMarkers(loc_array); 

function setMarkers(locations){ 
    //clearMap(); 
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
     var marker, i 
     for (i = 0; i < locations.length; i++) 
     { 
      var loan = locations[i]['txt']; 
      var lat = locations[i]['lat']; 
      var lng = locations[i]['lng']; 
      latlngset = new google.maps.LatLng(lat, lng); 
      var marker = new google.maps.Marker({ 
       map: map, title: loan , position: latlngset, icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png' //THIS WILL SET A BLUE COLOR MARKER YOU CAN SET MORE COLOR AND ALSO CAN MANAGE FROM DATABASE 
      }); 
      //map.setCenter(marker.getPosition()) 
      var content = loan; 
      var infowindow = new google.maps.InfoWindow() 
      google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
       return function() { 
        infowindow.setContent(content); 
        infowindow.open(map,marker); 
       }; 
      })(marker,content,infowindow)); 
     } 
    }

Также смотрите эту ссылку

goole-map-javascript-api-unable-to-load-markers-from-mysql-database

источник

2013-12-03 04:19:16 Avi

Не могли бы вы дать мне пример AJAX. Я все еще застрял. – codingman

Загрузить маркеры из базы данных mysql и отобразить их как маркеры на картах Google

ответ

Смежные вопросы