如何从谷歌地图迁移到TomTom

Question

我刚刚尝试建立一个新的项目关于地理信息系统的应用程序，可以存储在mysql数据库中的位置，因为谷歌地图是付费的，我想尝试免费的，它只是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>

Answer 1

使用TomTom Maps SDK for Web执行此操作与您的代码非常相似。

map init：

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