Как перейти с Google Maps на TomTom - PullRequest
Новая
       72

Как перейти с Google Maps на TomTom

1 голос
/ 12 октября 2019

Я только что попытался создать новый проект о ГИС-приложениях, которые могут хранить местоположения в базе данных MySQL, так как карта Google платная, я хочу попробовать бесплатные, это просто TomTom, я просто запутался в том, как конвертироватьэтот код на карту Tomtom, особенно в перетаскиваемом маркере, так что карта может быть сохранена и будет указывать на ту же папку при вызове из базы данных. Пожалуйста помоги. спасибо 

<div class="page-header">
    <h1>Add Some</h1>
</div>
<form method="post" action="?m=add" enctype="multipart/form-data">    
    <div class="row">
        <div class="col-sm-6">
            <?php if($_POST) include'aksi.php'?>
            <div class="form-group">
                <label>Name <span class="text-danger">*</span></label>
                <input class="form-control" type="text" name="name" value="<?=$_POST['name']?>"/>
            </div>
            <div class="form-group">
                <label>Picture <span class="text-danger">*</span></label>
                <input class="form-control" type="file" name="pic" />
            </div>
            <div class="form-group">
                <label>Latitude <span class="text-danger">*</span></label>
                <input class="form-control" type="text" name="lat" id="lat" value="<?=$_POST['lat']?>"/>
            </div>
            <div class="form-group">
                <label>Longitude <span class="text-danger">*</span></label>
                <input class="form-control" type="text" id="lng" name="lng" value="<?=$_POST['lng']?>"/>
            </div>
            <div class="form-group">
                <label>Address <span class="text-danger">*</span></label>
                <input class="form-control" type="text" name="address" value="<?=$_POST['address']?>"/>
            </div>
            <div class="form-group">
                <label>Keterangan</label>
                <textarea class="mce" name="keterangan"><?=$_POST['keterangan']?></textarea>
            </div>
            <div class="form-group">
                <button class="btn btn-primary"><span class="glyphicon glyphicon-save"></span> Save</button>
                <a class="btn btn-danger" href="?m=tempat"><span class="glyphicon glyphicon-arrow-left"></span> Back</a>
            </div>        
        </div>
        <div class="col-sm-6">
            <div id="map" style="height: 400px;"></div>
        </div>        
    </div>
</form>


<script>
var defaultCenter = {
    lat : <?=get_option('default_lat')?>, 
    lng : <?=get_option('default_lng')?>
};

function initMap() {

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: <?=get_option('default_zoom')?>,
    center: defaultCenter 
  });

var marker = new google.maps.Marker({
    position: defaultCenter,
    map: map,
    title: 'Click to zoom',
    draggable:true
  });


    marker.addListener('drag', handleEvent);
    marker.addListener('dragend', handleEvent);

    var infowindow = new google.maps.InfoWindow({
        content: '<h4>Drag for move locate</h4>'
    });

    infowindow.open(map, marker);
}

function handleEvent(event) {
    document.getElementById('lat').value = event.latLng.lat();
    document.getElementById('lng').value = event.latLng.lng();
}

$(function(){
    initMap();
})

</script>

1 Ответ

1 голос
/ 23 октября 2019

Выполнение этого с TomTom Maps SDK для Web очень похоже на ваш код.

карта инициализации: 

var map = new tt.map({
    container: 'map',
    key: apikey
    style: 'tomtom://vector/1/basic-main'
});

перетаскиваемый маркер: 

var marker = new tt.Marker({draggable: true}).setLngLat(defaultCenter).addTo(map);

Я такжерекомендуем вам ознакомиться с руководством по миграции: https://developer.tomtom.com/maps-sdk-web-js/tutorials/migrate-google-maps-tomtom

...