H5、移动端，选址组件的封装，依赖高德地图 |
您所在的位置：网站首页 › h5地图位置 › H5、移动端，选址组件的封装，依赖高德地图 |
H5、移动端，选址组件的封装，依赖高德地图
|
高德地图选址组件
官方地址 (function(){ var iframe = document.getElementById('test').contentWindow; document.getElementById('test').onload = function(){ iframe.postMessage('hello','https://m.amap.com/picker/'); }; window.addEventListener("message", function(e){ alert('您选择了:' + e.data.name + ',' + e.data.location) }, false); }())实现原理：依赖iframe，监听该组件，但是对 vue非常的不友好，监听要么点击延迟大，要么没反应， 且它也停更了。。2018年之后 没见动静 自我封装 选址组件 （依赖高德地图）实现选址组件，需要使用到 高德地图的 定位 POI选点 拖拽选址组件话不多说，开始动手实现 引入所需第三方包 （高德主包、高德UI包） 方便大家时间，直接上代码，注释有的, 样式我都给你写上。。{{ item.name }} {{ item.address }} //高德地图POI选点使用jQuery，所以引入 import $ from "jquery"; export default { components: {}, props: { data: {} }, data() { return { address_list: [], map: {} }; }, mounted() { //实例化 地图，注意 全局一定要使用一个实例化地图，原因：在一个地图上来回操作，当然只需要一个实例化 this.map = new AMap.Map("amap-test", { resizeEnable: true, zoom: 16 }); this.init(); this.poiInit(); this.getLocation() ; }, methods: { //POI 选点 poiInit() { let that = this; AMapUI.setDomLibrary($); AMapUI.loadUI(["misc/PoiPicker"], function(PoiPicker) { var poiPicker = new PoiPicker({ input: "pickerInput" }); poiPicker.on("poiPicked", function(poiResult) { //选点成功回调，移动坐标点，同时会触发拖拽地图事件 that.map.setCenter(poiResult.item.location); }); }); }, //拖拽地图 init() { let that = this; AMapUI.loadUI(["misc/PositionPicker"], function(PositionPicker) { var positionPicker = new PositionPicker({ mode: "dragMap", map: that.map }); positionPicker.on("success", function(positionResult) { //地址列表 that.address_list = positionResult.regeocode.pois; }); positionPicker.on("fail", function(positionResult) { // 海上或海外无法获得地址信息 }); positionPicker.start(); }); }, /** * 定位 * 在模拟器上，延迟较大，真机测试就无问题 * 注意 ios 手机，只有https网站才可定位，原因：自己百度 */ getLocation() { let that = this; AMap.plugin("AMap.Geolocation", function() { var geolocation = new AMap.Geolocation({ enableHighAccuracy: true, timeout: 5000, buttonOffset: new AMap.Pixel(10, 20), zoomToAccuracy: true, buttonPosition: "RB" }); geolocation.getCurrentPosition(); AMap.event.addListener(geolocation, "complete", onComplete); AMap.event.addListener(geolocation, "error", onError); function onComplete(data) { // data是具体的定位信息 that.map.setCenter(data.position); } function onError(data) { // 定位出错 } }); }, sureAddress(data) { let that = this; //选址成功，触发父组件。。 that.$emit("sureAddress", data); } } }; .map-address { #amap-test { position: fixed !important ; width: 100vw; height: 50vh; top: 0; } #pickerInput { position: fixed; z-index: 10; top: 0; padding: 0.2rem 0.2rem; width: calc(100% - 0.4rem); border-radius: 5px; border: 1px solid #bbb; } .address-list { padding-top: 50vh; ul { overflow: auto; height: 50vh; li { padding: 11px; border-bottom: 1px solid #ddd; p:nth-of-type(1) { color: #333; font-size: 0.25rem; } p:nth-of-type(2) { color: #666; font-size: 0.18rem; } } } } } 效果图 |
【本文地址】