vue 地址地图

<!-- <div class="MessageBox" v-if="form.exampleShow">

</div>

<el-cascader

style="width:3.5rem;height:0.46rem;"

size="large"

:options="regionOptions"

v-model="form.selectedOptions"

@change="addressChange"

></el-cascader>

</div>

</div>

</div>

</div>

<div style="padding:0 0 .1rem;">确认坐标，方便到店消费</div>

<el-amap

ref="map"

vid="amapDemo"

:amap-manager="amapManager"

:center="center"

:zoom="zoom"

:plugin="plugin"

:events="events"

class="amap-demo"

></el-amap>

</div>

<div style="padding:0.1rem 0;width:3.7rem;">{{form.address}}</div>

</div>

</div>

</div>-->

<el-cascader

style="width:310px;height:40px;"

size="large"

:options="regionOptions"

v-model="form.selectedOptions"

@change="addressChange"

></el-cascader>

</div>

</div>

</div>

</div>

<div style="padding:0 0 10px;">确认坐标，方便到店消费</div>

<el-amap

ref="map"

vid="amapDemo"

:amap-manager="amapManager"

:center="center"

:zoom="zoom"

:plugin="plugin"

:events="events"

class="amap-demo"

></el-amap>

</div>

<div style="padding:10px 0;width:300px;">{{form.address}}</div>

</div>

</div>

</templateCreat>

css

.exampleCenten {

padding: 20px;

padding-bottom: 0;

.flex {

align-items: center;

margin: 0 0rem 0.2rem;

.leftTxt {

width: 80px;

}

input {

width: 310px;

box-sizing: border-box;

height: 40px;

border-radius: 5px;

padding: 0 0.2rem;

border: 1px solid #d6d6d6;

}

input:focus {

outline: 0;

}

.listItemSon {

display: flex;

padding: 0.2rem;

border-bottom: 1px solid #d6d6d6;

img {

height: 0.8rem;

margin-right: 0.1rem;

width: 0.8rem;

}

.listItemSonChex {

border: 1px solid #027aff;

}

.msgboxBtns {

justify-content: flex-end;

padding: 0 0.2rem;

box-sizing: border-box;

width: 430px;

padding-bottom: 0.2rem;

div {

width: 122px;

height:38px;

line-height: 38px;

text-align: center;

margin-left: 0.2rem;

border-radius: 2px;

}

js 地图

import VueAMap from "vue-amap";

VueAMap.initAMapApiLoader({

key: "e1dedc6bdd765d46693986ff7ff969f4",

plugin: [

"AMap.Autocomplete", //输入提示插件

"AMap.PlaceSearch", //POI搜索插件

"AMap.Scale", //右下角缩略图插件比例尺

"AMap.OverView", //地图鹰眼插件

"AMap.ToolBar", //地图工具条

"AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制

"AMap.PolyEditor", //编辑折线多，边形

"AMap.CircleEditor", //圆形编辑器插件

"AMap.Geolocation" //定位控件，用来获取和展示用户主机所在的经纬度位置

uiVersion: "1.0"

});

let amapManager = new VueAMap.AMapManager();

data() {

let self = this;

return {

amapManager, //地图

regionOptions: regionData,

zoom: 12,

center: [121.59996, 31.197646],

getCertificationData: "",

uploadActions: "",

uploadType: "",

plugin: [

{

pName: "Geolocation",

events: {

init(o) {

// o 是高德地图定位插件实例

o.getCurrentPosition((status, result) => {

if (result && result.position) {

console.log(result);

self.form.longitude = result.position.lng;

self.form.latitude = result.position.lat;

self.center = [self.form.longitude, self.form.latitude];

self.form.address = result.formattedAddress;

}

});

}

events: {

init: o => {

o.getCity(result => {});

moveend: () => {},

zoomchange: () => {},

dragend: e => {

console.log(e);

var lgt = this.$refs.map.$$getCenter();

console.log(lgt);

self.form.latitude = lgt[1];

self.form.longitude = lgt[0];

// 这里通过高德 SDK 完成。

var geocoder = new AMap.Geocoder({

radius: 1000,

extensions: "all"

});

geocoder.getAddress(this.$refs.map.$$getCenter(), function(

status,

result

) {

if (status === "complete" && result.info === "OK") {

if (result && result.regeocode) {

self.form.address = result.regeocode.formattedAddress;

}

});

}

longitude: 0,

latitude: 0,

}}

vue 地址 地图

推荐阅读更多精彩内容

vue 地址地图