新网站做百度推广wordpress博客主机选择

当前位置： 首页 > news >正文

新网站做百度推广,wordpress博客主机选择,wordpress删除模板文件,wordpress 主题 授权本文详细讲解了如何使用 JQueryHTMLJavaScript 实现移动端页面中的地图位置选取功能。本文逐步展示了如何构建基本的地图页面#xff0c;如何通过点击地图获取经纬度和地理信息#xff0c;以及如何实现模糊查询地址并在地图上标注。最后#xff0c;提供了完整的代码示例HTMLJavaScript 实现移动端页面中的地图位置选取功能。本文逐步展示了如何构建基本的地图页面如何通过点击地图获取经纬度和地理信息以及如何实现模糊查询地址并在地图上标注。最后提供了完整的代码示例并总结了基于地图API进行地图位置选点的开发过程帮助开发者快速上手并应用到实际项目中。 一、百度地图API介绍 百度地图API为开发者提供了强大的地理信息服务可以轻松实现地图显示、位置选取、路线规划等功能。这里主要介绍2.0版本和3.0版本的功能示例以及路书的介绍。 2.0 API 2.0版本的API功能相对较少主要用于简单的地图展示和位置标注以下是一个基本的示例 var map new BMap.Map(container); var point new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15);3.0 API 3.0版本增加了更多的功能和优化提升了地图加载速度和交互体验以下是一个展示地图和标注的示例 var map new BMap.Map(container); var point new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); var marker new BMap.Marker(point); map.addOverlay(marker);百度路书 路书是百度地图API提供的一种记录和展示路线的功能可以用来展示旅游路线、出行规划等以下是一个基本示例 var driving new BMap.DrivingRoute(map, {renderOptions: { map: map, autoViewport: true } }); driving.search(起点, 终点);本文将采用百度地图3.0 API来实现地图位置选点的功能包括地图展示、点击地图选点、地理信息转经纬度、位置的模糊查询等。 二、初始化地图页面 首先创建一个基本的HTML页面并引入百度地图API !DOCTYPE html html headtitle点击地图获取地址和经纬度/titlemeta http-equivContent-Type contenttext/html; charsetutf-8 /script typetext/javascript srchttps://api.map.baidu.com/getscript?v3.0ak你的aks1/scriptstylebody, html {margin: 0;padding: 0;height: 100%;overflow: hidden;}.main-div {position: relative;height: 100%;display: flex;flex-direction: column;}form {background: #f8f8f8;padding: 5px;}.input-group {display: flex;align-items: center;margin-bottom: 5px;}label {flex: 0 0 60px;margin-right: 15px;white-space: nowrap;}input[typetext] {flex: 1;padding: 10px;box-sizing: border-box;}#allmap {width: 100%;height: 100%;position: absolute;top: 0px;}/style /head bodydiv classmain-divdiv idallmap/div/div /body scriptvar map new BMap.Map(allmap);var point new BMap.Point(116.404, 39.915);map.centerAndZoom(point, 15); /script /html实现效果 三、增加地理信息模态框 在页面上方添加一个表单用于显示和输入经纬度和地理信息 formdiv classinput-grouplabel forlng经度/labelinput typetext namelng idlng value readonly //divdiv classinput-grouplabel forlat纬度/labelinput typetext namelat idlat value readonly //divdiv classinput-grouplabel foraddress地址/labelinput typetext nameaddress idaddress //div /form将这段表单代码加入到 main-div 里。 同时我们需要将地图向下移动240px给模态框留出空间字体修改为40px适应手机端页面。 修改及新增的CSS如下没有修改的样式继续保留 stylelabel {flex: 0 0 60px;margin-right: 15px;white-space: nowrap;font-size: 40px;}input[typetext] {flex: 1;padding: 10px;box-sizing: border-box;font-size: 40px;}#allmap {width: 100%;height: 100%;position: absolute;top: 240px;}.tangram-suggestion table {width: 100% !important;font-size: 32px !important;line-height: 50px !important;cursor: default !important;}.tangram-suggestion table tr td{line-height: 40px !important;height: 60px !important;}/style实现效果如图 目前我们的表单还只是一个静态的下面我们来实现给表单的动态赋值。 四、实现地图点击事件 下面我们为地图添加点击事件获取点击位置的经纬度并通过 Geocoder 获取地理信息将获取的经纬度填充到上方表单。 JavaScript 里添加如下代码 map.addEventListener(click, function(e) {document.getElementById(lng).value e.point.lng;document.getElementById(lat).value e.point.lat;var geoc new BMap.Geocoder();geoc.getLocation(e.point, function(rs) {var addComp rs.addressComponents;document.getElementById(address).value addComp.province addComp.city addComp.district addComp.street addComp.streetNumber;}); });实现效果如图 点击地图上位置时会触发点击事件自动为上方表单动态赋值经纬度。 接着我们优化代码打开页面时自动定位到我们的位置并实现点击事件时经纬度、地址的填充。 JavaScript 内容全部替换为 var map new BMap.Map(allmap);var geoc new BMap.Geocoder(); //地址解析对象var markersArray [];var geolocation new BMap.Geolocation();var point new BMap.Point(116.331398, 39.897445);map.centerAndZoom(point, 32); // 中心点geolocation.getCurrentPosition(function ® {if (this.getStatus() BMAP_STATUS_SUCCESS) {var mk new BMap.Marker(r.point);map.addOverlay(mk);map.panTo(r.point);map.enableScrollWheelZoom(true);}else {alert(failed this.getStatus());}}, { enableHighAccuracy: true })map.addEventListener(click, showInfo);//清除标识function clearOverlays() {if (markersArray) {for (i in markersArray) {map.removeOverlay(markersArray[i])}}}//地图上标注function addMarker(point) {var marker new BMap.Marker(point);markersArray.push(marker);clearOverlays();map.addOverlay(marker);}//点击地图事件处理function showInfo(e) {document.getElementById(lng).value e.point.lng;document.getElementById(lat).value e.point.lat;geoc.getLocation(e.point, function (rs) {var addComp rs.addressComponents;var address addComp.province addComp.city addComp.district addComp.street addComp.streetNumber;document.getElementById(sever_add).value address;});map.clearOverlays();addMarker(e.point);}实现效果如下 至此地图选取位置获得经纬度和地址信息的功能已经完成。 下面我们来实现输入模糊地址来反向定位地图中的坐标并获得精确的位置经纬度。 五、输入模糊地址定位地图坐标 通过Autocomplete实现地址模糊查询并在选定地址后在地图上标注位置。 首先我们给地址输入框的输入进行校验增加JavaScript代码 function validate() {var sever_add document.getElementsByName(sever_add)[0].value;if (isNull(sever_add)) {alert(请选择地址);return false;}return true;}//判断是否是空function isNull(a) {return (a || typeof (a) undefined || a null) ? true : false;} }接着增加输入后的下列框事件和下拉框点击事件 var ac new BMap.Autocomplete( //建立一个自动完成的对象{input: sever_add, location: map});ac.addEventListener(onhighlight, function (e) { //鼠标放在下拉列表上的事件var str ;var _value e.fromitem.value;var value ;if (e.fromitem.index -1) {value _value.province _value.city _value.district _value.street _value.business;}str FromItembr /index e.fromitem.index br /value value;value ;if (e.toitem.index -1) {_value e.toitem.value;value _value.province _value.city _value.district _value.street _value.business;}str br /ToItembr /index e.toitem.index br /value value;});var myValue;ac.addEventListener(onconfirm, function (e) { //鼠标点击下拉列表后的事件var _value e.item.value;myValue _value.province _value.city _value.district _value.street _value.business;setPlace();});function setPlace() {map.clearOverlays(); //清除地图上所有覆盖物function myFun() {var pp local.getResults().getPoi(0).point; //获取第一个智能搜索的结果map.centerAndZoom(pp, 32);map.addOverlay(new BMap.Marker(pp)); //添加标注document.getElementById(lng).value pp.lng;document.getElementById(lat).value pp.lat;}var local new BMap.LocalSearch(map, { //智能搜索onSearchComplete: myFun});local.search(myValue);}实现效果如下 输入 “云龙湖”会显示模糊查询到的地点。
选择地点地图自动跳转到目标地点为中心的界面显示目标点标注并返回经纬度、详细地址给上方表单。 至此输入模糊地址定位地图坐标的功能已经实现。 六、页面全部源码 下面是本文页面的全部代码为了方便测试已经把 JavaScript 和 CSS 与 Html 写在一个页面内。 完整的源码如下 !DOCTYPE htmlPUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlnshttp://www.w3.org/1999/xhtmlheadtitle点击地图获取地址和经纬度mapaddresslnglat/titlemeta namerobots contentnoindex, nofollowmeta http-equivContent-Type contenttext/html; charsetutf-8 /script typetext/javascriptsrchttps://api.map.baidu.com/getscript?v3.0ak你的aks1/scriptstylebody,html {margin: 0;padding: 0;height: 100%;overflow: hidden;}.main-div {position: relative;height: 100%;display: flex;flex-direction: column;}form {background: #f8f8f8;padding: 5px;}.input-group {display: flex;align-items: center;margin-bottom: 5px;}label {flex: 0 0 60px;margin-right: 15px;white-space: nowrap;font-size: 40px;}input[typetext] {flex: 1;padding: 10px;box-sizing: border-box;font-size: 40px;}#allmap {width: 100%;height: 100%;position: absolute;top: 240px;}.tangram-suggestion table {width: 100% !important;font-size: 32px !important;line-height: 50px !important;cursor: default !important;}.tangram-suggestion table tr td{line-height: 40px !important;height: 60px !important;}/style /headbodydiv classmain-divform methodpost action nametheForm enctypemultipart/form-data onsubmitreturn validate()div classinput-grouplabel forlng经度/labelinput typetext namelng idlng value readonly//divdiv classinput-grouplabel forlat纬度/labelinput typetext namelat idlat value readonly//divdiv classinput-grouplabel forsever_add地址/labelinput typetext namesever_add idsever_add value //div/formdiv idallmap/div/div /bodyscript typetext/javascriptfunction validate() {var sever_add document.getElementsByName(sever_add)[0].value;if (isNull(sever_add)) {alert(请选择地址);return false;}return true;}//判断是否是空function isNull(a) {return (a || typeof (a) undefined || a null) ? true : false;}var map new BMap.Map(allmap);var geoc new BMap.Geocoder(); //地址解析对象var markersArray [];var geolocation new BMap.Geolocation();var point new BMap.Point(116.331398, 39.897445);map.centerAndZoom(point, 32); // 中心点geolocation.getCurrentPosition(function ® {if (this.getStatus() BMAP_STATUS_SUCCESS) {var mk new BMap.Marker(r.point);map.addOverlay(mk);map.panTo(r.point);map.enableScrollWheelZoom(true);}else {alert(failed this.getStatus());}}, { enableHighAccuracy: true })map.addEventListener(click, showInfo);//清除标识function clearOverlays() {if (markersArray) {for (i in markersArray) {map.removeOverlay(markersArray[i])}}}//地图上标注function addMarker(point) {var marker new BMap.Marker(point);markersArray.push(marker);clearOverlays();map.addOverlay(marker);}//点击地图事件处理function showInfo(e) {document.getElementById(lng).value e.point.lng;document.getElementById(lat).value e.point.lat;geoc.getLocation(e.point, function (rs) {var addComp rs.addressComponents;var address addComp.province addComp.city addComp.district addComp.street addComp.streetNumber;document.getElementById(sever_add).value address;});map.clearOverlays();addMarker(e.point);}var ac new BMap.Autocomplete( //建立一个自动完成的对象{input: sever_add, location: map});ac.addEventListener(onhighlight, function (e) { //鼠标放在下拉列表上的事件var str ;var _value e.fromitem.value;var value ;if (e.fromitem.index -1) {value _value.province _value.city _value.district _value.street _value.business;}str FromItembr /index e.fromitem.index br /value value;value ;if (e.toitem.index -1) {_value e.toitem.value;value _value.province _value.city _value.district _value.street _value.business;}str br /ToItembr /index e.toitem.index br /value value;});var myValue;ac.addEventListener(onconfirm, function (e) { //鼠标点击下拉列表后的事件var _value e.item.value;myValue _value.province _value.city _value.district _value.street _value.business;setPlace();});function setPlace() {map.clearOverlays(); //清除地图上所有覆盖物function myFun() {var pp local.getResults().getPoi(0).point; //获取第一个智能搜索的结果map.centerAndZoom(pp, 32);map.addOverlay(new BMap.Marker(pp)); //添加标注document.getElementById(lng).value pp.lng;document.getElementById(lat).value pp.lat;}var local new BMap.LocalSearch(map, { //智能搜索onSearchComplete: myFun});local.search(myValue);} /script/html七、可视化地图上位置选取功能总结 通过百度地图API我们可以方便地实现地图位置选点的功能提升用户体验。在本文中我们介绍了如何构建基本的地图页面如何实现点击地图获取经纬度和地理信息以及通过模糊查询来标注地图位置。希望这篇教程能够帮助你快速上手百度地图API并应用到实际项目中。 当然地图的API还有很多下面整理了一份目前市面上常用地图API对比希望对你有所帮助。 地图API提供商主要功能优点缺点百度地图API百度地图展示、位置选取、路线规划、地理编码、逆地理编码、POI搜索覆盖中国范围广中文支持好提供详细的中国本地数据国际覆盖范围有限谷歌地图APIGoogle地图展示、位置选取、路线规划、地理编码、逆地理编码、街景服务国际覆盖范围广数据更新及时街景服务优秀国内使用受限高德地图API阿里巴巴地图展示、位置选取、路线规划、地理编码、逆地理编码、POI搜索中国本地数据详细支持多种出行方式国际覆盖范围有限腾讯地图API腾讯地图展示、位置选取、路线规划、地理编码、逆地理编码、POI搜索提供丰富的中国本地数据接口简单易用国际覆盖范围有限OpenStreetMap APIOpenStreetMap地图展示、位置选取、路线规划、地理编码、逆地理编码免费且开源数据覆盖全球社区支持强数据精度和更新频率可能不及商业地图API 这些API各有特点开发者可以根据项目需求选择合适的地图API。百度地图、高德地图和腾讯地图在中国本地服务方面具有优势而谷歌地图和OpenStreetMap在国际覆盖范围方面表现较好。