可以做游戏的网站有哪些,网站出售商品建设,备案的域名做电影网站吗,北京展板设计制作公司#x1f90d;step1:高德地图开放平台#xff0c;根据指引注册成为高德开放平台开发者#xff0c;并申请 web 平台#xff08;JS API#xff09;的 key 和安全密钥; #x1f90d;step2:在html引入安全密钥#xff08;获取经纬度用#xff0c;不然会报错#xff09; step1:高德地图开放平台根据指引注册成为高德开放平台开发者并申请 web 平台JS API的 key 和安全密钥; step2:在html引入安全密钥获取经纬度用不然会报错 script typetext/javascriptwindow._AMapSecurityConfig {securityJsCode: xxx, //所申请的安全密钥 注意这是安全密钥而不是key}/script
按 NPM 方式安装使用 Loader
npm i amap/amap-jsapi-loader --save
新建地图组件 MapContainer.vue 并引入 amap-jsapi-loader
import AMapLoader from amap/amap-jsapi-loader;
效果图:MapContainer组件只将经纬度和地址传到父组件 默认位置和经纬度 点击地图上某个位置时 地图组件代码只将经纬度传给父组件因为form表单还有与地图无关的数据所以没放到组件中
templatedivdiv idcontainer/div/div
/templatescript
/**JS API Loader* 创建者XRr* 创建时间2023-10-10* 组件功能获取地图上某个地点的经纬度* */
import AMapLoader from amap/amap-jsapi-loader;
export default {name: MapDialog,props: [defaultPoint, defaultAddress],data() {return {visible: false, //弹窗显隐center: [115.97539, 28.715532], //地图中心点point: [], //经纬度-lng latmap: null, //地图实例marker: null, //地图icongeocoder: null, //逆解析实例address: null, //地址};},mounted() {this.initMap();},methods: {//DOM初始化完成进行地图初始化initMap() {// 默认的经纬度和地址if (this.defaultPoint this.defaultAddress) {this.address this.defaultAddress;this.point this.defaultPoint;this.center this.point;}AMapLoader.load({key: xxx, // 申请好的Web端开发者Key首次调用 load 时必填version: 2.0, // 指定要加载的 JSAPI 的版本缺省时默认为 1.4.15plugins: [AMap.Geocoder, // 逆向地理解码插件AMap.Marker, // 点标记插件AMap.ToolBar,//比例尺显示当前地图中心的比例尺AMap.Scale,//比例尺显示当前地图中心的比例尺AMap.ElasticMarker,//灵活点标记可以随着地图级别改变样式和大小的 MarkerAMap.Geolocation,//定位提供了获取用户当前准确位置、所在城市的方法], // 需要使用的的插件列表}).then((AMap) {this.map new AMap.Map(container, {//设置地图容器idzoom: 12, //初始化地图级别center: this.center, //初始化地图中心点位置});// 如果父组件传入了有效值 回显一个iconif (this.point.length 0) {this.addMarker();}//监听用户的点击事件this.map.on(click, (e) {let lng e.lnglat.lng;let lat e.lnglat.lat;this.point [lng, lat];// 增加点标记this.addMarker();// 获取地址this.getAddress();});}).catch((e) {console.log(e);});},// 增加点标记addMarker() {// 清除其他iconif (this.marker) {this.marker.setMap(null);this.marker null;}// 重新渲染iconthis.marker new AMap.Marker({icon: //a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png,position: this.point, //icon经纬度offset: new AMap.Pixel(-13, -30), //icon中心点的偏移量});this.marker.setMap(this.map); //设置icon},// 将经纬度转换为地址getAddress() {const self this;// 这里通过高德 SDK 完成。this.geocoder new AMap.Geocoder({city: 全国, //地理编码时设置地址描述所在城市; 默认全国; 可选值城市名中文或中文全拼、citycode、adcoderadius: 100, //逆地理编码时以给定坐标为中心点; 默认1000; 取值范围(0-3000)extensions: all, //逆地理编码时返回信息的详略; 默认值base返回基本地址信息; 默认值base返回基本地址信息});//调用逆解析方法 个人开发者调用量上限5000次/日this.geocoder.getAddress(this.point, function (status, result) {if (status complete result.info OK) {if (result result.regeocode) {// this指向改变self.address result.regeocode.formattedAddress;self.$emit(sendLoction,self.point,self.address)}}});}},
};
/scriptstyle scoped
#container {padding: 0px;margin: 0px;width: 100%;height: 400px;
}
/style 父组件弹出框代码
templateel-dialog:titleid ? 新建 : 编辑:close-on-click-modalfalseappend-to-body:visible.syncvisiblelock-scrollwidth65%el-form :modelformData sizesmall label-width100pxel-row :gutter0el-col :span8el-form-item label经度:el-input :disabledtrue v-modelformData.lng placeholder请选择/el-input/el-form-item/el-colel-col :span8el-form-item label经度:el-input :disabledtrue v-modelformData.lat placeholder请选择/el-input/el-form-item/el-colel-col :span8el-form-item label有效范围(米):el-input v-modelformData.range placeholder请选择/el-input/el-form-item/el-col/el-rowel-row :gutter0el-col :span12el-form-item label地址:el-input:disabledtruev-modelformData.addressplaceholder请输入/el-input/el-form-item/el-colel-col :span12el-form-item label地址简称:el-inputv-modelformData.abbreviationplaceholder请输入内容/el-input/el-form-item/el-col/el-row/el-formmap-container:defaultPointpoint:defaultAddressaddresssendLoctiongetLoction/map-containerspan slotfooter classdialog-footerel-button clickvisible false 取 消/el-buttonel-button typeprimary clickdataFormSubmit确 定/el-button/span/el-dialog
/template
script
import MapContainer from /components/MapContainer/MapContainer.vue;
export default {components: {MapContainer },data() {return {visible: false,loading: false,formData: {lng: ,lat: ,range: null,address: null,//地址简称abbreviation: ,},//默认的地址和经纬度point:[106.26667,38.46667],address: 银川,};},methods: {//初始化数据init() {this.defaultLngAndLat()this.visible true;},//获取经纬度-子组件给父组件传的值getLoction(point, address) {this.formData.lng point[0];this.formData.lat point[1];this.formData.address address;},//默认地址和经纬度defaultLngAndLat(){this.formData.lng this.point[0];this.formData.lat this.point[1];this.formData.address this.address;},// 表单提交dataFormSubmit() {this.$refs[elForm].validate((valid) {if (valid) {this.submit();}});},submit() {}},
};
/script
记录一下虽然简单但是每次用到都要重新梳理流程过程很烦躁。
