vue项目中使用高的地图vue-map,带标注、点击选址和搜索功能
第一步:安装依赖npm install vue-amap --save第二步:在main.js中import AMap from "vue-amap";Vue.use(AMap);AMap.initAMapApiLoader({key: "开发者申请的key",plugin: ["AMap.Scale", "AMap.OverV
·
第一步:安装依赖
npm install vue-amap --save
第二步:在main.js中
import AMap from "vue-amap";
Vue.use(AMap);
AMap.initAMapApiLoader({
key: "开发者申请的key",
plugin: ["AMap.Scale", "AMap.OverView", "AMap.ToolBar", "AMap.MapType"],
uiVersion: "1.0.11", // ui库版本,不配置不加载,
v: "1.4.4"
});
第三步:在demo.vue中使用
<el-amap
ref="map"
vid="amapDemo"
:amap-manager="amapManager"
:center="center"
:zoom="zoom"
:plugin="plugin"
:events="events"
class="amap-demo">
<el-amap-marker vid="amapDemo" :position="center"></el-amap-marker>
</el-amap>
import AMap from "vue-amap";
let amapManager = new AMap.AMapManager();
data(){
return{
amapManager,
zoom: 12,
center: [121, 31],
events: {
init: o => {
console.log(o.getCenter());
// console.log(this.$refs.map.$$getInstance());
o.getCity(result => {
console.log(result);
});
},
moveend: () => {},
zoomchange: () => {},
click: e => {
console.log(e);
this.center = [e.lnglat.lng, e.lnglat.lat];//点击选择新地址为中心点
const msg = {
key: "您申请的key值",
location: this.center.join()
};
this.$$.ajax({
url: "https://restapi.amap.com/v3/geocode/regeo",
data: msg,
success: data => {
console.log(data);
let d = data.regeocode;
if (d) {
this.address = d.formatted_address;//点击选择新地址并获取地址的名称
}
}
});
}
},
plugin: [
"ToolBar",
{
pName: "MapType",
defaultType: 0,
events: {
init(o) {
console.log(o);
}
}
}
],
}
}
⚠️注意:
附:amap搜索建议:
const msg = {
key: "你申请的key值",
keywords: this.address
};
this.$http
.get("https://restapi.amap.com/v3/assistant/inputtips", {
params: msg,
withCredentials: false //一定要加这个,不然会报跨域的错(如果你封装的$http没有设置withCredentials:true就不用加这行)
})
.then(res => {
console.log(res.data);
let data = res.data;
this.tips = data.tips;
})
.catch(error => {
this.$message.error(error);
});
更多推荐
已为社区贡献28条内容
所有评论(0)