建站学院

铸就企业 服务社会 成就自己

调用高德地图接口

发布时间:2023-03-27点击数:390

后台管理增加标签

{label:map}

替换以下的坐标地址


拾取坐标系统

  https://lbs.amap.com/tools/picker


div标签

           <script src="https://webapi.amap.com/maps?v=1.4.15&amp;key=04dc3d6cea0acd7efcdf421ffd378800"></script>
           <div id="container"></div>
            <script>
                window.onload = function() {
                    var map = new AMap.Map('container', {
                        resizeEnable: true,
                        zoom: 14,
                        scrollWheel: false,
                        center: [{label:map}],
                        lang: "zh_cn"
                    });
                    //地图内容
                    map.setFeatures(['bg', 'building', 'road', 'point'])
                        //地图空间
                    AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType'],
                        function() {
                            map.addControl(new AMap.ToolBar());

                            map.addControl(new AMap.Scale());
                        });
                    //覆盖物
                    var marker = new AMap.Marker({
                        position: [{label:map}]
                    });
                    marker.setMap(map);
                    var circle = new AMap.Circle({
                        center: [{label:map}],
                        radius: 100,
                        fillOpacity: 0.2,
                        strokeWeight: 1
                    })
                    circle.setMap(map);
                    //自定义窗体
                    var infowindow;
                    var infoWindowContent = '<div class="infowindow-content"><h3>{pboot:companyname}</h3><p>{pboot:companyaddress}</p><p>{pboot:companyphone}</p></div>';
                    map.plugin('AMap.AdvancedInfoWindow', function() {
                        infowindow = new AMap.AdvancedInfoWindow({
                            panel: 'panel',
                            placeSearch: false,
                            asOrigin: false,
                            asDestination: false,
                            content: infoWindowContent
                        });
                        infowindow.open(map, [{label:map}]);
                    });

                    //监听地图的click事件,点击地图,允许鼠标滚轮缩小或放大地图
                    var clickEventListener = map.on('click', function() {
                        map.setStatus({
                            scrollWheel: true
                        });
                    });
                    //监听地图的mouseout事件,鼠标移出地图区域,鼠标滚轮缩小或放大地图功能取消
                    var mouseOutEventListener = map.on('mouseout', function() {
                        map.setStatus({
                            scrollWheel: false
                        });
                    });

                }
            </script>