公司网站建设模板下载,最近韩国电影片在线观看,淘宝客网站源码和模版有什么区别,做电影网站怎么样HTML页面配置高德地图#xff0c;获取位置
一、使用情况
1、之前项目用的前后端分离框架#xff0c;所以用Vue接入的高德地图#xff0c;自动搜索补全#xff0c;是请求的后台返回的数据。 2、现在用单体项目#xff0c;前端是Bootstrap#xff0c;需要接高德地图…HTML页面配置高德地图获取位置
一、使用情况
1、之前项目用的前后端分离框架所以用Vue接入的高德地图自动搜索补全是请求的后台返回的数据。 2、现在用单体项目前端是Bootstrap需要接高德地图自动搜索补全直接是前端请求数据没有通过后台。 3、申请key的方式可以看之前的文档。此处需要注意如下图
二、功能介绍
1、打开地图鼠标点击获取经纬度并标记 2、输入搜索条件提示对应相关信息下拉选择 3、点击对应数据地图跳转该位置并标记
三、效果图 四、HTML页面
1、页面代码 注为了测试此处安全密钥直接配置在了代码中其余方式可参考JS API 安全密钥使用
!doctype html
html
headmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentinitial-scale1.0, user-scalableno, widthdevice-widthtitle鼠标拾取地图坐标/titlelink relstylesheet hrefhttps://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css /script typetext/javascript srchttps://cache.amap.com/lbs/static/addToolbar.js/scriptlink relstylesheet hrefhttps://cache.amap.com/lbs/static/main1119.css/script typetext/javascript srchttps://webapi.amap.com/ui/1.0/main.js/scriptstylehtml,body,#container {width: 100%;height: 100%;}/style
/headbody
div idcontainer classmap/div
div idmyPageToptabletrtdlabel请输入关键字/label/td/trtrtdinput idtipinput//td/tr/table
/div
div idautodiv/div
div classinput-cardh4左击获取经纬度/h4div classinput-iteminput typetext readonlytrue idlnglat/div
/divscript typetext/javascriptwindow._AMapSecurityConfig {securityJsCode: 对应的安全密钥,};
/script
script srchttps://webapi.amap.com/maps?v2.0key自己申请的Web端(JS API)pluginAMap.AutoComplete/script
script typetext/javascript srchttps://cache.amap.com/lbs/static/addToolbar.js/script
script typetext/javascriptvar marker, map new AMap.Map(container, {zoom: 11,resizeEnable: true,center: [116.397428, 39.90923], //地图中心点});//输入提示var autoOptions {input: tipinput};AMap.plugin([AMap.PlaceSearch,AMap.AutoComplete], function(){var auto new AMap.AutoComplete(autoOptions);var placeSearch new AMap.PlaceSearch({map: map}); //构造地点查询类auto.on(select, select);//注册监听当选中某条记录时会触发function select(e) {placeSearch.setCity(e.poi.adcode);placeSearch.search(e.poi.name); //关键字查询查询var latLngArr [e.poi.location.lng, e.poi.location.lat]//添加标记map.clearMap();marker new AMap.Marker({icon: //a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png,position: [e.poi.location.lng, e.poi.location.lat],offset: new AMap.Pixel(-13, -30)});marker.setMap(map);map.setCenter(latLngArr);document.getElementById(lnglat).value e.poi.location.lng , e.poi.location.lat}});//为地图注册click事件获取鼠标点击出的经纬度坐标map.on(click, function(e) {document.getElementById(lnglat).value e.lnglat.getLng() , e.lnglat.getLat()var latLngArr [e.lnglat.getLng(), e.lnglat.getLat()]//添加标记map.clearMap();marker new AMap.Marker({icon: //a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png,position: [e.lnglat.getLng(), e.lnglat.getLat()],offset: new AMap.Pixel(-13, -30)});marker.setMap(map);map.setCenter(latLngArr);});
/script
/body
/html一个在学习的开发者勿喷欢迎交流
