从 mysql 数据库加载标记并在 Google 地图上显示为标记答案

【问题标题】：Load markers from mysql database and display as markers on Google maps从 mysql 数据库加载标记并在 Google 地图上显示为标记
【发布时间】：2013-12-18 23:23:26
【问题描述】：

我正在使用 phonegap，并且我有一个谷歌地图，它可以定位用户并在地图上放置一个标记。我想要做的是从 mysql 数据库中加载标记，该数据库包含每个地方的经纬度详细信息。我必须通过 php 和 ajax 来做到这一点吗？这是我目前拥有的代码。谢谢

 <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>

【问题讨论】：

标签： php mysql ajax cordova

【解决方案1】：

定义地图

var map;

初始化地图：

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

【讨论】：

能否给我一个 AJAX 示例。我还是卡住了。