来自 json url 的 jquery 映射

Question

我已经编写了显示地图标记的代码，但我想从服务器 url 加载地图标记纬度、长值

例如：http://socialdeal4u.com/test2.php

下面是我的代码

js代码：

var map;
    function initMap() {
        var myLatLng = { lat: '39.539429069523', lng: '3.3304989337921' };
        var myOptions = {
            zoom: 8,
            center: myLatLng
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: 'name here'
        });

    }
    // google.maps.event.addDomListener(window, 'load', initMap);

    function showmap(){
        console.log('hii');
         setTimeout(function(){
            initMap();
        }, 20);
        google.maps.event.trigger(map, 'resize');
    }

HTML代码

<ul id="tabs" class="nav nav-tabs col-md-12" data-tabs="tabs">
                            <li class="active"><a href="#tab-red" data-toggle="tab" aria-expanded="true" id="htl">Tab 1</a></li>
                            <li class="mpatatta"><a href="#tab-map" data-toggle="tab" aria-expanded="true" onclick="showmap();">Map</a></li>

</ul>
<div id="my-tab-content" class="tab-content">
    <div class="tab-pane active" id="tab-red">
         tab one
    </div>
    <div class="tab-pane" id="tab-map">
         <div id="map_canvas"></div>
    </div>
</div>

Answer 1

我以这种方式实现了这一点。我已从我的代码中删除了您不想要的其他要求。如果你想让我解释什么，请发表评论。 PHP 部分短代码。使用您的查询来获取 lat、long 和 through 循环填充变量。

$lat_long = '';
//loop goes here
$lat_long .= "[''," . $result['latitude'] . "," . $result['longitude'] . "]";
$returnArray = array("lat_long" => $lat_long, "result"=> $total_result);
echo json_encode($returnArray);

您将接收 JSON 并将其保存在全局变量“位置”中的 JavaScript 部分。

var mapOptions, mapcenter, bounds;
var zoomLevel = 0;
var LatLngList,locations,mapcenter_lat,mapcenter_lng;
var marker;

function initialize() {
    bounds = new google.maps.LatLngBounds();

    if (locations.length > 1) {
        for (var i = 0; i < locations.length; i++) {
            LatLngList[i] = new google.maps.LatLng(locations[i][1], locations[i][2]);
            bounds.extend(LatLngList[i]);
        }
    }
    else {
        zoomLevel = 13;
    }

    mapcenter = new google.maps.LatLng(mapcenter_lat, mapcenter_lng);
    mapOptions = new google.maps.Map(document.getElementById('home_map'), {
        zoom: zoomLevel,
        center: mapcenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    loadMarkers();
    if (locations.length > 1) {
        mapOptions.fitBounds(bounds);
    }
}

//------------------------------map----------------------------------------


$.post("php file",{variables}, function(data){

    var result = JSON.parse(data);
        if(result.result != 0){


            LatLngList = new Array();
            locations = eval("["+result.lat_long+"]");
            mapcenter_lat =result.lat;
            mapcenter_lng = result.lng;


            if(!window.google||!window.google.maps){
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.id = 'googleMaps';
            script.src = 'https://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize';
            document.body.appendChild(script);
            }
            else{initialize();}
       }
});


//Load markers
function loadMarkers(){

    var i;
    var myMarkers = [];
    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: mapOptions,
            icon: '/images/Custome Marker Image.png',
            animation: google.maps.Animation.DROP,
            size: new google.maps.Size(5, 5)
        });
    }
}

Answer 2

一种选择是使用JQuery.getJSON

proof of concept fiddle

代码 sn-p：

var map;

function initMap(data) {
    var myLatLng = {
        lat: data.lat,
        lng: data.lon
    };
    var myOptions = {
        zoom: 8,
        center: myLatLng
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
    myOptions);

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: data.hotelname
    });

}
google.maps.event.addDomListener(window, 'load', function () {
    $.getJSON("http://socialdeal4u.com/test2.php", initMap);
});

html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>