Наносим MAP ICON на карту с использованием API Google Maps

CRAZy_Str · 13 Мар 2015

Возьму небольшой пример с урока

[Frapsy] Наносим MapIcon на карту[/URL]
Допустим, мы имеем массив с необходимыми данными, X и Y координатами, пусть он выглядит вот так:
[PHP]Array
(
    [0] => Array
        (
            [coord_x] => 1497.05957
            [coord_y] => -687.89270
        )

    [1] => Array
        (
            [coord_x] => 1442.70715
            [coord_y] => -628.83184
        )

    [2] => Array
        (
            [coord_x] => 1332.21997
            [coord_y] => -633.46594
        )

)

Для примера я взял всего 3 "комплекта" координат, в реальной ситуации, например, с домами, у вас будет на много больше (я слышал, что в некоторых модах более 10к домов).

Теперь, когда данные у нас "в руках" возьмёмся за дело.

Создаём файл к примеру с названием map.php

и помещаем в него

PHP:

<?php
error_reporting(-1);

function map() {

    $house = "";
    $name = "";
$mysqli = new mysqli("localhost", "root", "", "test");
    $query = $mysqli->query("SELECT `*` FROM `test`");

    while ( $val = $query->fetch_array() ) {
        
        $name = "AddLocation('http://wiki.sa-mp.com/wroot/images2/b/b6/Icon_31.gif',{$val['coord_x']},{$val['coord_y']},\"<h3><b>Дом № {$val['id']}</b></h3>\");\n"; //где coord_x это название поля координат X в вашей базе и y тоже самое

        $house .= $name;

    }

    return $house;
    $mysqli->close();

}
?>
<!DOCTYPE HTML>
<html>
    <head>
        <title>ONLINE MAP</title>
        <!-- Disallow users to scale this page -->
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
        <style type="text/css">html,body,#map-canvas{height:100%;margin:0}h3{width:150px;text-align:center}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:normal;line-height:1.428571429;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}.btn:hover,.btn:focus{color:#333;text-decoration:none!important}.btn:active,.btn.active{background-image:none;outline:none!important}.btn.disabled,.btn[disabled],fieldset[disabled] .btn{pointer-events:none;cursor:not-allowed;filter: alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none;opacity:.65}.btn-info{color:#fff;background-color:#5bc0de;border-color:#46b8da}.btn-info:hover,.btn-info:focus,.btn-info:active,.btn-info.active,.open .dropdown-toggle.btn-info{color:#fff;background-color:#39b3d7;border-color:#269abc}.btn-info:active,.btn-info.active,.open .dropdown-toggle.btn-info{background-image:none}.btn-info.disabled,.btn-info[disabled],fieldset[disabled] .btn-info,.btn-info.disabled:hover,.btn-info[disabled]:hover,fieldset[disabled] .btn-info:hover,.btn-info.disabled:focus,.btn-info[disabled]:focus,fieldset[disabled] .btn-info:focus,.btn-info.disabled:active,.btn-info[disabled]:active,fieldset[disabled] .btn-info:active,.btn-info.disabled.active,.btn-info[disabled].active,fieldset[disabled] .btn-info.active{background-color:#5bc0de;border-color:#46b8da}.btn-info .badge{color:#5bc0de;background-color:#fff}.btn-danger{color:#fff;background-color:#d9534f;border-color:#d43f3a}.btn-danger:hover,.btn-danger:focus,.btn-danger:active,.btn-danger.active,.open .dropdown-toggle.btn-danger{color:#fff;background-color:#d2322d;border-color:#ac2925}.btn-danger:active,.btn-danger.active,.open .dropdown-toggle.btn-danger{background-image:none}.btn-danger.disabled,.btn-danger[disabled],fieldset[disabled] .btn-danger,.btn-danger.disabled:hover,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger:hover,.btn-danger.disabled:focus,.btn-danger[disabled]:focus,fieldset[disabled] .btn-danger:focus,.btn-danger.disabled:active,.btn-danger[disabled]:active,fieldset[disabled] .btn-danger:active,.btn-danger.disabled.active,.btn-danger[disabled].active,fieldset[disabled] .btn-danger.active{background-color:#d9534f;border-color:#d43f3a}.btn-danger .badge{color:#d9534f;background-color:#fff}</style>
    </head>
    <body>
        <!-- The container the map is rendered in -->
        <div id="map-canvas"></div>

        <!-- Load all javascript -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://maps.google.com/maps/api/js?sensor=false&key=AIzaSyDawjoO2lY-UfHXmmlx2LHo2K1a0gGcAVg"></script>
        <script src="js/SanMap.min.js"></script>
        <script>
            var mapType = new SanMapType(1, 3, function (zoom, x, y) {
                return x == -1 && y== -1 ? "http://sanmap.ikkentim.com/tiles/map.outer.png" : "http://sanmap.ikkentim.com/tiles/sat."+zoom+"."+x+"."+y+".png";
            });
            var sm = new SanMap('map-canvas',{'HQ Карта':mapType},2);
            var licznik = 0;
            var homeMarker = [];
            function AddLocation(icon,pox_x,pos_y,description) {
                licznik += 0;
                setTimeout(function(){
                    
                    var homeInfoWindow = new google.maps.InfoWindow({
                        content:description
                    });
                    var a = new google.maps.Marker({
                        position: SanMap.getLatLngFromPos(pox_x,pos_y),
                        map: sm.map,
                        icon: icon
                    });
                    homeMarker.push(a);
                    var liczba = homeMarker.indexOf(a);
                    google.maps.event.addListener(homeMarker[liczba],'click',function() {
                        homeInfoWindow.open(sm.map,homeMarker[liczba]);
                    });
                },licznik);
            };
            <?php echo map(); ?>
        </script>
    </body>
</html>

Теперь создадим папку js и создадим в ней файл SanMap.min.js

в данный файл добавим

PHP:

function SanMapProjection(){var n=512;this.pixelOrigin_=new google.maps.Point(n/2,n/2),this.pixelsPerLonDegree_=n/360,this.scaleLat=2,this.scaleLng=2,this.fromLatLngToPoint=function(n,t){var i=t||new google.maps.Point(0,0);return i.x=this.pixelOrigin_.x+n.lng()*this.pixelsPerLonDegree_*this.scaleLng,i.y=this.pixelOrigin_.y-n.lat()*this.pixelsPerLonDegree_*this.scaleLat,i},this.fromPointToLatLng=function(n){var i=(n.x-this.pixelOrigin_.x)/this.pixelsPerLonDegree_/this.scaleLng,t=(-n.y+this.pixelOrigin_.y)/this.pixelsPerLonDegree_/this.scaleLat;return new google.maps.LatLng(t,i,!0)}}function SanMapType(n,t,i){this.getImageMapType=function(r){return new google.maps.ImageMapType({getTileUrl:function(n,t){var u=n.x,e=n.y,f=1<<t;if(e<0||e>=f||r!==!0&&(u<0||u>=f))return i(t,-1,-1);for(;u<0;u+=f);return i(t,u%f,e)},tileSize:new google.maps.Size(512,512),maxZoom:t,minZoom:n})}}function SanMap(n,t,i,r,u){var o,s,e,f;if(t!==undefined&&t.length!=0){this.map=new google.maps.Map(document.getElementById(n),{zoom:i||2,center:r||SanMap.getLatLngFromPos(0,0),streetViewControl:!1,mapTypeControlOptions:{mapTypeIds:Object.keys(t)}});for(o in t)t.hasOwnProperty(o)&&(s=t[o].getImageMapType(u||!1),s.name=s.alt=o,s.projection=new SanMapProjection,this.map.mapTypes.set(o,s));this.map.setMapTypeId(Object.keys(t)[0]),u||(e=this.map,f=new google.maps.LatLngBounds(new google.maps.LatLng(-90,-90),new google.maps.LatLng(90,90)),google.maps.event.addListener(e,"center_changed",function(){if(!f.contains(e.getCenter())){var t=e.getCenter().lng(),n=e.getCenter().lat();t<f.getSouthWest().lng()&&(t=f.getSouthWest().lng()),t>f.getNorthEast().lng()&&(t=f.getNorthEast().lng()),n<f.getSouthWest().lat()&&(n=f.getSouthWest().lat()),n>f.getNorthEast().lat()&&(n=f.getNorthEast().lat()),e.setCenter(new google.maps.LatLng(n,t))}}))}}SanMap.getLatLngFromPos=function(n,t){return typeof n=="object"?new google.maps.LatLng(n.y/3e3*90,n.x/3e3*90):new google.maps.LatLng(t/3e3*90,n/3e3*90)},SanMap.getPosFromLatLng=function(n){return{x:n.lng()*3e3/90,y:n.lat()*3e3/90}};

сама таблица если нужна

PHP:

CREATE TABLE IF NOT EXISTS `test` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `coord_x` varchar(10) NOT NULL DEFAULT '0.0',
  `coord_y` varchar(10) NOT NULL DEFAULT '0.0',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;

--
-- Дамп данных таблицы `test`
--

INSERT INTO `test` (`id`, `coord_x`, `coord_y`) VALUES
(1, '1497.05957', '-687.89270'),
(2, '1442.70715', '-628.83184'),
(3, '1332.21997', '-633.46594');

По идеи всё готово, вам лишь нужно вывести координаты по X и Y из нужной вам таблицы.

Переход в группу "Пользователь"

Наносим MAP ICON на карту с использованием API Google Maps

CRAZy_Str

Эксперт