jquery--地图点击（根据输入位置获取定位，点击定位获取坐标）

vcoy

已于 2022-05-31 09:50:10 修改

阅读量1.1k

点赞数

分类专栏：前端文章标签： jquery javascript ecmascript

于 2022-05-31 09:48:54 首次发布

本文链接：https://blog.csdn.net/weixin_43917045/article/details/125058957

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.定义并显示地图

   <div id="map" style="position: absolute;width: 100%;margin-top: 50px;height: 84%;left:0;border: 1px solid gray;overflow:hidden;">
            </div>


var map = new BMap.Map("map");
            map.centerAndZoom("上海", 20);  //默认显示地址
            map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
            map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
            map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
            map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
            map.addControl(new BMap.OverviewMapControl({
                isOpen: true,
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT
            })); //右下角，打开
            var localSearch = new BMap.LocalSearch(map);
            localSearch.enableAutoViewport(); //允许自动调节窗体大小

2.从input获取输入的地址

//storeAddress 为input获取的输入的地址
     function searchByStationName(storeAddress) {
                map.clearOverlays(); //清空原来的标注
                var keyword = storeAddress
                //alert(storeAddress);
               localSearch.setSearchCompleteCallback(function(searchResult) {
                    var poi = searchResult.getPoi(0);
                    map.centerAndZoom(poi.point, 23);
                    var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat)); // 创建标注，为要查询的地方对应的经纬度
                    map.addOverlay(marker);
					//注释--固定搜索的位置并显示跳动和点击跳动位置弹出坐标
                    // var content = storeAddress + "<br/><br/>经度：" + poi.point.lng + "<br/>纬度：" + poi.point.lat;
                    // var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
                    // marker.addEventListener("click", function() {
                    //     this.openInfoWindow(infoWindow);
                    // });
                    // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                });
                localSearch.search(keyword);
            }

3.地图点击事件


            map.addEventListener("click",function (e){
                // alert("该点的经纬度："+e.point.lng+","+e.point.lat)
                $("#longitude").val(e.point.lng);
                $("#latitude").val(e.point.lat);
                map.clearOverlays(); //清空原来的标注
                var marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat)); // 创建标注，为要查询的地方对应的经纬度
                map.addOverlay(marker);
            })