javascript - 如何从Google Maps迁移到TomTom

我刚刚尝试建立一个有关gis应用程序的新项目，该项目可以将位置存储在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>

最佳答案

使用TomTom Maps SDK for 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

关于javascript - 如何从Google Maps迁移到TomTom，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58357014/