vue或者H5实现百度地图拾取经纬度，并且搜索标记 |
您所在的位置：网站首页 › 百度坐标拾取器定位APP › vue或者H5实现百度地图拾取经纬度，并且搜索标记 |
vue或者H5实现百度地图拾取经纬度，并且搜索标记
|
1.H5实现百度地图坐标拾取
H5效果图展示 使用CDN方法引入百度地图的js文件 话不多说，直接上代码 拾取坐标-百度地图API body, html { width: 100%; height: 100%; margin: 0; font-family: "微软雅黑"; overflow: hidden; } #allmap { height: 100%; width: 100%; overflow: hidden; } #r-result { width: 100%; font-size: 14px; position: absolute; top: 10px; left: 200px } 地址: 经度: 纬度： 提交 // 在指定容器创建地图实例并设置最大最小缩放级别 var map = new BMap.Map("allmap", { minZoom: 5, maxZoom: 19 }); // 初始化地图，设置中心点和显示级别 map.centerAndZoom(new BMap.Point(121.36564, 31.22611), 19); // 开启鼠标滚轮缩放功能，仅对PC上有效 map.enableScrollWheelZoom(true); // 将控件（平移缩放控件）添加到地图上 map.addControl(new BMap.NavigationControl()); // 为地图增加点击事件，为input赋值 map.addEventListener("click", function(e) { document.getElementById('lat').value = e.point.lat; document.getElementById('lng').value = e.point.lng; }); // 创建位置检索、周边检索和范围检索 var local = new BMap.LocalSearch(map, { renderOptions: { map: map } }); // 发起检索 function theLocation() { var city = document.getElementById("cityName").value; if (city != "") { local.search(city); } }; // 弹出经纬度 function submit() { var lat = document.getElementById('lat'); var lng = document.getElementById('lng'); alert("经度：" + lng.value + "\n" + "纬度：" + lat.value); }; 2.vue实现百度地图拾取坐标及标注2.1安装百度地图到本地项目 cnpm i vue-baidu-map --s2.2 vue界面 点击看这里能明白 开源不易，谢谢支持，三连击走一走 |
【本文地址】
今日新闻 |
推荐新闻 |