vue 高德地图搜索功能_Vue中使用高德地图POI搜索

创建 loadMap.js

/**

* 动态加载高德地图

*

* @export

* @param {*} key 高德地图key

* @param {*} plugins 高德地图插件

* @param {string} [v='1.4.14'] 高德地图版本

* @returns

*/

export default function loadMap(key, plugins, v = '1.4.14') {

return new Promise(function(resolve, reject) {

if (typeof AMap !== 'undefined') {

// eslint-disable-next-line no-undef

resolve(AMap)

return true

}

window.onCallback = function() {

// eslint-disable-next-line no-undef

resolve(AMap)

}

let script = document.createElement('script')

script.type = 'text/javascript'

script.src = `https://webapi.amap.com/maps?v=${v}&key=${key}&plugin=${plugins}&callback=onCallback`

script.onerror = reject

document.head.appendChild(script)

})

}

在.vue页面中引入loadMap.js

import loadMap from "../assets/js/loadMap";

html模板

用到的2个插件  "AMap.Autocomplete", "AMap.PlaceSearch",

import loadMap from "../assets/js/loadMap";

export default {

name: "barChart",

data() {

return {

inputContent: "",

// 地图实例

GDMap: null,

// 加载的一些插件

// 更多参考：https://lbs.amap.com/api/javascript-api/guide/abc/plugins#plugins

plugins: [

"AMap.Autocomplete",

"AMap.PlaceSearch",

"AMap.OverView",

"AMap.MouseTool",

"AMap.PolyEditor",

"AMap.RectangleEditor",

="AMap.DistrictLayer",

"AMap.CustomLayer"

],

// key

key: "3862bb74758c8d185100ed5df030949d",

//key: "64c880093eda5bd293e4d5c324e5131b", Autocomplete没有效果

// 地图版本

v: "1.4.4"

};

},

mounted() {

loadMap(this.key, this.plugins, this.v)

.then(AMap => {

this.GDMap = new AMap.Map("GDMap", {

zoom: 10

//center: [119.947, 31.7728]

});

this.GDMap.on("complete", () => {

console.log("completed");

var auto = new AMap.Autocomplete({

input: "tipinput"

});

var placeSearch = new AMap.PlaceSearch({

map: this.GDMap

}); //构造地点查询类

AMap.event.addListener(auto, "select", select); //注册监听，当选中某条记录时会触发

AMap.event.addListener(placeSearch,"markerClick",(e)=>{

console.log(e.data.location.lng,e.data.location.lat) // 经纬度

})

function select(e) {

placeSearch.setCity(e.poi.adcode);

placeSearch.search(e.poi.name); //关键字查询查询

}

});

})

.catch(() => {

console.log("地图加载失败！");

});

},

methods: {}

};

#panel {

position: absolute;

background-color: white;

max-height: 90%;

overflow-y: auto;

top: 10px;

right: 10px;

width: 280px;

}

遇到的问题：有的key会使输入提示无效，换个key 就好了。官网的例子回调函数要改成箭头函数，否则this指向会有问题。

来源：oschina

链接：https://my.oschina.net/u/2612473/blog/4325720