仿美团外卖腾讯地图选点(免费附源码)

腾讯地图API制作美团外卖配送地址定位信息效果代码。选择省/市/区，输入街道详细地址精确地图定位效果。
描述：自动构建地图搜索，地图选点，拖拽选点，动态删除版权信息，异步加载腾讯地图js等
异步加载腾讯地图js、自动构建地图搜索，地图选点拖拽选点。仅供参考。

在这里插入图片描述

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>仿美团外卖腾讯地图选点</title>
    <style>
        input,
        select {
     
     
            width: 200px;
            height: 35px;
        }

        .form-item {
     
     
            margin: 20px;
            width: 100%;
        }

        .content {
     
     
            width: 800px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="layui-form">
            <div class="form-item">
                <label>省/市/区</label>&nbsp;&nbsp;
                <select name="Province" class="store_Province" style="width:200px;">
<option value="">请选择省</option>
<option value="广东省">广东省</option>
</select>&nbsp;&nbsp;
                <select name="City" class="store_City" style="width:200px;">
<option value="">请选择市</option>
<option value="广州市">广州市</option>
</select>&nbsp;&nbsp;
                <select name="Area" class="store_Area" style="width:200px">
<option value="">请选择县/区</option>
<option value="天河区">天河区</option>
<option value="番禺区">番禺区</option>
<option value="越秀区">越秀区</option>
<option value="荔湾区">荔湾区</option>
</select>
            </div>
        </div>
        <div class="form-item">
            详细地址&nbsp;&nbsp;
            <input type="text" class="layui-input store_Address" style="width:623px;" maxlength="300" name="Address" id="address" placeholder="详细至门牌号, 与营业执照地址一致" />
            <img src="img/location.png" style="width:20px;top: 5px; position: relative;" id="btnLocation" />
        </div>

        <div class="form-item">
            <div style="width:710px">
                <div id="myMap" style="width:100%;height:400px;"></div>
            </div>
        </div>
        <input type="hidden" class="store_Lng" />
        <input type="hidden" class="store_Lat" />
    </div>
    <script src="js/index.js"></script>
</body>
.....↓ 关注下方公众号, 回复 '001' 即可获取源码
</html>

js

window.onload = function() {
    
    
    $("#btnLocation").click(function() {
    
    
        if ($('.store_Province').val() == "" || $('.store_City').val() == "" || $('.store_Area').val() == "") {
    
    
            alert("请选择省市区");
            return;
        }
        if ($("#address").val() == "") {
    
    
            alert("请填写详细地址");
            return;
        }
        var address = $('.store_Province').find("option:selected").text() + $('.store_City').find("option:selected").text() + $('.store_Area').find("option:selected").text() + $("#address").val();
        setPlace(address);
    });
    $('.store_Area').change(function(obj) {
    
    
        if ($('.store_Province').val() == "" || $('.store_City').val() == "" || $('.store_Area').val() == "") {
    
    
            alert("请选择省市区");
            return;
        }
        $(".store_Lng").val("");
        $(".store_Lat").val("");
        earth();
    });

    function earth() {
    
    
        var address = $('.store_Province').find("option:selected").text() + $('.store_City').find("option:selected").text() + $('.store_Area').find("option:selected").text();;
        if (address != "") {
    
    
            var city = $(".store_City").val();
            myGeo.getPoint(address, function(point) {
    
    
                if (point) {
    
    
                    map.centerAndZoom(point, 12);
                    map.clearOverlays();
                } else {
    
    }
            }, city);
        }
    }
    var IsHover = true;
    var tipIndex;
    $(".btnLocation").click(function(e) {
    
    
        if ($('.store_Province').val() == "" || $('.store_City').val() == "" || $('.store_Area').val() == "") {
    
    
            alert("请选择省市区");
            return;
        }
        if ($("#Address").val() == "") {
    
    
            alert("请填写详细地址");
            return;
        }
        var address = $('.store_Province').find("option:selected").text() + $('.store_City').find("option:selected").text() + $('.store_Area').find("option:selected").text() + $("#Address").val();
        setPlace(address, true);
    });


    var autocompleteMarkers = [];
    var ap;
    var load = true;

    function autocomplete() {
    
    
        ap = new qq.maps.place.Autocomplete(document.getElementById('baiduAddress'), {
    
    
            offset: new qq.maps.Size(0, 5),
            location: $(".store_City").val()
        });
        var keyword = "";
        qq.maps.event.addListener(ap, "confirm", function(res) {
    
    
            keyword = res.value;
            searchService.search(keyword);
        });
    }
    var marker;
    var infoWin;
    var searchService;

    function clearOverlays(clear) {
    
    
        if (clear) {
    
    
            if (Array.isArray(clear)) {
    
    
                for (i in clear) {
    
    
                    clear[i].setMap(null);
                }
            } else {
    
    
                clear.setMap(null);
            }
        }
    }

    function clickCoordinate(e, isLoad, isMarker, callback) {
    
    
        var lat = e.lat;
        var lng = e.lng;
        if (isMarker != true) {
    
    
            clearOverlays(marker);
            marker = new qq.maps.Marker({
    
    
                map: map,
                position: e,
                draggable: true
            });
            qq.maps.event.addListener(marker, "click", function(res) {
    
    
                clickCoordinate(res.latLng);
            });
        }
        clearOverlays(infoWin);
        infoWin = new qq.maps.InfoWindow({
    
    
            map: map
        });

    function loadControl() {
    
    
        var div = document.createElement("div");
        div.style.cursor = "pointer";
        div.style.margin = "10px auto auto auto";
        div.style.backgroundColor = "white";
        div.innerHTML = "<div><input type='text' maxlength='300' id='baiduAddress' name='baiduAddress' style='width: 350px;height: 33px;text-indent:1em;float:left;border: 1px solid #D2D2D2!important;border-right:none;' placeholder='输入门店详细地址, 越详细定位越精准' />" +
            "<div  class='searchMap' style='border:1px solid #f50;background-color:#f50;width:60px;height:33px;float:left;'></div>" +
            "<img class='searchMap' src='img/search.png' style='height: 22px;position: absolute;right: 18px;top: 7px;'/><div style='clear:both'></div></div>";
        div.index = 1;
        map.controls[qq.maps.ControlPosition.TOP_CENTER].push(div);
    }
}
.....↓ 关注下方公众号, 回复 '001' 即可获取源码