Question

我正在使用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>

Answer 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);
    });
}

在设备就绪功能中调用此功能。你可以传递当前lat，long -

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

调用ajax请求并从服务器获取位置数据。在ajax成功请求中的locations数组中插入所有纬度和经度，并调用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

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

1 个答案: