jquery map from json url

jquery map from json url

本文关键字：url json from map jquery      更新时间：2023-09-26

我已经编写了代码来显示地图标记，但是我想从服务器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>

我是这样实现的。我已经从我的代码中删除了您不想要的额外要求。如果你想让我解释什么，请评论。PHP部分短代码。使用您的查询捕获长、长和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);

Javascript部分，您将接收JSON并将其保存在全局变量"locations"中。

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

一个选择是使用JQuery。getJSON

概念验证

代码片段: 

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>

相关文章：