1

我刚刚尝试构建一个关于可以在 mysql 数据库中存储位置的 gis 应用程序的新项目，因为 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>
4

1 回答 1

1

使用 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

于 2019-10-23T13:17:58.337 回答