自己做网站卖东西需要交税吗,电商网站建设计划书,建设银行登录用户名是什么,邢台制作PC端高德地图使用步骤#xff1a;
1、注册并登录高德开放平台获取 2、安装高德依赖#xff08;amap-jsapi-loader#xff09; 3、初始化地图 4、首次打开地图获取当前定位并标记 5、根据已有地址自动定位到指定地址并标记 6、新增、清除标记及自定义信息窗体 7、鼠标点击地…PC端高德地图使用步骤
1、注册并登录高德开放平台获取 2、安装高德依赖amap-jsapi-loader 3、初始化地图 4、首次打开地图获取当前定位并标记 5、根据已有地址自动定位到指定地址并标记 6、新增、清除标记及自定义信息窗体 7、鼠标点击地图并选点标记 8、根据关键字搜索并自动定位 9、效果图 10、完整代码
高德官方api高德官方开放平台
一、注册并登录高德开放平台获取key和秘钥 引用
scriptimport AMapLoader from amap/amap-jsapi-loader;window._AMapSecurityConfig {securityJsCode: **************************,//你的秘钥}/script二、安装高德依赖
npm i amap/amap-jsapi-loader --save三、初始化地图 封装公共的地图组件 map-container :positionInfo positionInfo select getLocationInfo/map-containermounted() {this.initMap()},methods:{initMap(){AMapLoader.load({key:**********************, // 申请好的Web端开发者Key首次调用 load 时必填version:2.0, // 指定要加载的 JSAPI 的版本缺省时默认为 1.4.15plugins: [ //需要使用的插件AMap.ToolBar,AMap.Scale,AMap.Geolocation,AMap.PlaceSearch,AMap.AutoComplete,AMap.Geocoder,AMap.CitySearch],resizeEnable: true,}).then((AMap){const that this;that.map new AMap.Map(container,{ //设置地图容器idviewMode:3D, //是否为3D地图模式zoom:12, //初始化地图级别});}).catch(e{console.log(e);})},四、首次打开地图获取当前定位并标记 initMap(){AMapLoader.load({key:*******************, // 申请好的Web端开发者Key首次调用 load 时必填version:2.0, // 指定要加载的 JSAPI 的版本缺省时默认为 1.4.15plugins: [AMap.ToolBar,AMap.Scale,AMap.Geolocation,AMap.PlaceSearch,AMap.AutoComplete,AMap.Geocoder,AMap.CitySearch],resizeEnable: true,}).then((AMap){const that this;that.map new AMap.Map(container,{ //设置地图容器idviewMode:3D, //是否为3D地图模式zoom:12, //初始化地图级别});that.getCurrentLocation();//获取当前定位that.geocoder new AMap.Geocoder()that.map.addControl(new AMap.Scale()) // 在图面添加比例尺控件展示地图在当前层级和纬度下的比例尺that.map.addControl(new AMap.ToolBar()) //在图面添加鹰眼控件在地图右下角显示地图的缩略图}).catch(e{console.log(e);})},//获取当前定位getCurrentLocation(){const that this;that.geolocation new AMap.Geolocation({timeout: 3000, //超过3秒后停止定位默认5senableHighAccuracy: true,zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点});that.geolocation.getCurrentPosition(function(status,result){//备注getCurrentPosition方法会调用超时或失败//Get geolocation time out浏览器定位超时包括原生的超时可以适当增加超时属性的设定值以减少这一现象。//另外还有个别浏览器如google Chrome浏览器等本身的定位接口是黑洞通过其请求定位完全没有回应也会超时返回失败。//Get geolocation failed定位失败Chrome、火狐以及部分套壳浏览器接入的定位服务在国外有较大限制失败率高。console.log(status,result);if(statuscomplete){that.onComplete(result)}else{that.onError(result) //失败后可使用getCityInfo获取非精准定位具体到省市}});},//解析定位结果onComplete(data) {console.log(定位结果 data.position) //经纬度信息let lnglat data.position;let marker new AMap.Marker({ //创建标记position: new AMap.LngLat(lnglat[0], lnglat[1])})this.map.clearMap()// 清除所有覆盖物点标志this.map.add(marker)// 添加点标志let that this//经纬度转换为中文地址详情that.geocoder.getAddress(lnglat, function (status, result) {if (status complete result.regeocode) {that.address result.regeocode.formattedAddress;that.showInfoWindow(marker);//自定义信息窗体} else {that.$message.error(根据经纬度查询地址失败)}})},//解析定位错误信息onError(data) {this.getLngLatLocation()},//在获取具体定位失败时调用的代码非精准定位getLngLatLocation() {const that this;that.geolocation.getCityInfo(function (status, result) {if (status complete) {let data result.positionthat.address result.province result.city;that.showLocation(data)} else {that.$message.error(获取地址失败)}})},五、根据已有地址自动定位到指定地址并标记
initMap(){AMapLoader.load({key:*******************, // 申请好的Web端开发者Key首次调用 load 时必填version:2.0, // 指定要加载的 JSAPI 的版本缺省时默认为 1.4.15plugins: [AMap.ToolBar,AMap.Scale,AMap.Geolocation,AMap.PlaceSearch,AMap.AutoComplete,AMap.Geocoder,AMap.CitySearch],resizeEnable: true,}).then((AMap){const that this;that.map new AMap.Map(container,{ //设置地图容器idviewMode:3D, //是否为3D地图模式zoom:15, //初始化地图级别center[that.positionInfo.lng,that.positionInfo.lat]; // 首次加载地图自动加载到指定位置中心});that.showLocation(data) //新增标记并展示信息窗体that.map.addControl(new AMap.Scale()) // 在图面添加比例尺控件展示地图在当前层级和纬度下的比例尺that.map.addControl(new AMap.ToolBar()) //在图面添加鹰眼控件在地图右下角显示地图的缩略图}).catch(e{console.log(e);})},六、新增、清除标记及自定义信息窗体
//新增标记
showLocation(data){let marker new AMap.Marker({position: new AMap.LngLat( data[0],data[1]) //参数为经纬度})this.map.clearMap()// 清除所有覆盖物点标志this.map.add(marker)// 添加点标志this.showInfoWindow(marker);//自定义信息窗体},
//自定义信息窗体
showInfoWindow(marker){let infoWindow new AMap.InfoWindow({isCustom: true, //是否自定义信息窗体content: div stylebackground-color: white;padding: 0 5px; border-radius: 5px;border: 1px solid #cccccc; 地址${this.address}/div,closeWhenClickMap: true,zIndex: 999,offset: new AMap.Pixel(16, -35)});infoWindow.open(this.map, marker.getPosition());
},七、鼠标点击地图并选点标记 initMap(){AMapLoader.load({key:*******************, // 申请好的Web端开发者Key首次调用 load 时必填version:2.0, // 指定要加载的 JSAPI 的版本缺省时默认为 1.4.15plugins: [AMap.ToolBar,AMap.Scale,AMap.Geolocation,AMap.PlaceSearch,AMap.AutoComplete,AMap.Geocoder,AMap.CitySearch],resizeEnable: true,}).then((AMap){const that this;that.map new AMap.Map(container,{ //设置地图容器idviewMode:3D, //是否为3D地图模式zoom:12, //初始化地图级别});that.geocoder new AMap.Geocoder()that.map.addControl(new AMap.Scale()) // 在图面添加比例尺控件展示地图在当前层级和纬度下的比例尺that.map.addControl(new AMap.ToolBar()) //在图面添加鹰眼控件在地图右下角显示地图的缩略图that.handleClick(AMap)//地图选点}).catch(e{console.log(e);})},//点击地图获取地理位置handleClick(){this.map.on(click, (e) {let lng e.lnglat.lnglet lat e.lnglat.latlet marker new AMap.Marker({position: new AMap.LngLat(lng, lat)})this.map.clearMap()// 清除所有覆盖物点标志this.map.add(marker)// 添加点标志let lnglat [lng, lat]let that thisthat.geocoder.getAddress(lnglat, function (status, result) {if (status complete result.regeocode) {that.address result.regeocode.formattedAddress;that.showInfoWindow(marker);//自定义信息窗体let thisPosition {address: that.address,lng: lng,lat: lat};that.$emit(select,thisPosition) //返回给父组件} else {that.$message.error(根据经纬度查询地址失败)}})})},八、根据关键字搜索并自动定位
//搜索框及搜索结果选择窗
templatediv//搜索框div classmap-boxdiv classlabel关键字搜索/divel-inputv-modelmapAddressplaceholder请输入内容idtipinputkeyup.enter.nativesearchKeyWord/el-inputel-button typeprimary clicksearchKeyWord iconel-icon-search /el-button/div//搜索结果选择窗div classmap_search_result v-ifshowSearchResultulli clickmarkerResult(item) v-for(item,index) in poiList :keyindex{{item.name}}/li/ul/div//地图div idcontainer :style{width: width, height: height}/div/div
/templateinitMap(){AMapLoader.load({key:*******************, // 申请好的Web端开发者Key首次调用 load 时必填version:2.0, // 指定要加载的 JSAPI 的版本缺省时默认为 1.4.15plugins: [AMap.ToolBar,AMap.Scale,AMap.Geolocation,AMap.PlaceSearch,AMap.AutoComplete,AMap.Geocoder,AMap.CitySearch],resizeEnable: true,}).then((AMap){const that this;that.map new AMap.Map(container,{ //设置地图容器idviewMode:3D, //是否为3D地图模式zoom:12, //初始化地图级别});that.handleClick(AMap)//地图选点that.map.addControl(new AMap.Scale()) // 在图面添加比例尺控件展示地图在当前层级和纬度下的比例尺that.map.addControl(new AMap.ToolBar()) //在图面添加鹰眼控件在地图右下角显示地图的缩略图that.geocoder new AMap.Geocoder()that.mapSearchInit()}).catch(e{console.log(e);})},/** 初始化搜索 */mapSearchInit(){let autoOptions {input: tipInput,}let autoCompleteComponent new AMap.Autocomplete(autoOptions);this.autoCompleteComponent autoCompleteComponent;// 注册placeSearch组件this.placeSearchComponent new AMap.PlaceSearch()},//根据输入内容查询searchKeyWord(){let that thisthat.placeSearchComponent.search(that.mapAddress, function (status, result) {if(statuscomplete result.info OK){that.showsearchResult truethat.poiList result.poiList.pois}else{that.showsearchResult falsethat.poiList []that.$message({message: 没有查到结果,type: warning,});}})},//选择搜索的内容markerResult(data){this.showsearchResult false;this.address data.name;var marker new AMap.Marker({position: [Number(data.location.lng),Number(data.location.lat)],});this.map.clearMap()// 清除所有覆盖物点标志this.map.add(marker)// 添加点标志this.showInfoWindow(marker);setTimeout(() {this.map.setCenter(data.location);this.map.setZoom(15);}, 50)let thisPosition {address: this.address,lng: data.location.lng,lat: data.location.lat};this.$emit(select,thisPosition)},九、效果图 十、完整代码 点赞收藏留言会提供哈~~~
