腾讯地图 html地图选点

<div style="display: flex; align-items: center;">
	<input type="text" id="address" lay-verify="required" name="lnglat" class="layui-input" value="{if $info}{$info.lat}, {$info.lng}{/if}" placeholder="请在地图上选择站点位置" style="width: 25%" readonly>
	<span style="color: gray">&nbsp;请使用鼠标在地图上点击选择门店位置</span>
</div>
<div style="display: flex; align-items: center;">
	<input class="layui-input" placeholder="" style="width:25%;padding:3px 4px;margin-top: 3px" type="text" id="place" />
	<span style="color: gray">&nbsp;输入地址名称快速辅助检索</span>
</div>
<div id="container" style="width: 100%; height: 500px;margin-top: 5px"></div>

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key={:config('sf_config.tencent_map.key')}&libraries=place"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key={:config('sf_config.tencent_map.key')}&libraries=place"></script>
<script>

    function init() {

        var center = new TMap.LatLng({if $info}{$info.lat}, {$info.lng}{else /}34.745350487487904, 113.65991592407227{/if});//设置中心点坐标

        var map = new TMap.Map("container", {
            // center: new qq.maps.LatLng(39.916527,116.397128),
            center: center,
            zoom: 13,
            styles: {
                "marker": new TMap.MarkerStyle({
                    "width": 25,
                    "height": 35,
                    "anchor": { x: 16, y: 32 },
                    "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
                })
            },
        });

        //实例化自动完成
        var ap = new qq.maps.place.Autocomplete(document.getElementById('place'));

        var keyword = "";
        //调用Poi检索类。用于进行本地检索、周边检索等服务。
        var searchService = new qq.maps.SearchService({
            complete : function(results){
                if(results.type === "CITY_LIST") {
                    searchService.setLocation(results.detail.cities[0].cityName);
                    searchService.search(keyword);
                    return;
                }
                var pois = results.detail.pois;
                console.log(pois);
                var latlngBounds = new qq.maps.LatLngBounds();
                for(var i = 0,l = pois.length;i < l; i++){
                    var poi = pois[i];
                    latlngBounds.extend(poi.latLng);

                    if (markerLayer) {
                        markerLayer.setMap(null);
                        markerLayer = null;
                    }

                    document.getElementById('address').value = poi.latLng.lat + ', ' + poi.latLng.lng;

                    markerLayer = new TMap.MultiMarker({
                        id: 'marker-layer1',
                        map: map,
                    });

                    markerLayer.add({
                        position: new TMap.LatLng(poi.latLng.lat, poi.latLng.lng)
                    });

                    /*var marker = new qq.maps.Marker({
                        map:map,
                        position: poi.latLng
                    });

                    marker.setTitle(poi.name);*/
                }
                map.setCenter(new TMap.LatLng(poi.latLng.lat, poi.latLng.lng));
                map.fitBounds(latlngBounds);
            }
        });

        //添加监听事件
        qq.maps.event.addListener(ap, "confirm", function(res){
            keyword = res.value;
            searchService.search(keyword);
        });

        var isset = 0;

        //初始化marker图层
        /*var markerLayer = new TMap.MultiMarker({
            id: 'marker-layer1',
            map: map
        });*/

        var markerLayer;

        markerLayer = new TMap.MultiMarker({
            id: 'marker-layer1',
            map: map,
        });

        {if $info}
        //初始化marker
        markerLayer.add({
            position: new TMap.LatLng({$info.lat}, {$info.lng})
        });
        {/if}

            map.on("click", (evt) => {

                if (markerLayer) {
                    markerLayer.setMap(null);
                    markerLayer = null;
                }

                document.getElementById('address').value = evt.latLng;

                markerLayer = new TMap.MultiMarker({
                    id: 'marker-layer1',
                    map: map,
                });

                markerLayer.add({
                    position: evt.latLng
                });

            });

            //初始化marker
            /*var marker = new TMap.MultiMarker({
                id: "marker-layer", //图层id
                map: map,
                styles: { //点标注的相关样式
                    "marker": new TMap.MarkerStyle({
                        "width": 25,
                        "height": 35,
                        "anchor": { x: 16, y: 32 },
                        "src": "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png"
                    })
                },

            });*/
        }

        init();
</script>