uniapp中引入百度地图并实现关键字自动补全
1、首先你需要去百度地图官m网去申请密钥
这个过程呢~也是比较简单的,网上教程很多 我就不多解释了 请自行上百度获取
2、创建一个公共方法
创建一个名为
map.js
的文件,目录为page/common/map.js
; 当然你也可以自定义文件名为与目录
代码如下:
export function mymap(ak) {
// 此处ak 是你百度地图获取的密钥
return new Promise(function(resolve, reject) {
window.init = function() {
resolve(mymap)
}
var script = document.createElement('script')
script.type = 'text/javascript'
script.src = `//api.map.baidu.com/api?v=2.0&ak=${
ak}&callback=init`
script.onerror = reject
document.head.appendChild(script)
})
}
3、在你需要使用到百度地图的vue文件中引入此方法
使用 import 引入文件 复制项目中注意 文件路劲是否正确
import {
mymap } from '../../common/map.js'
4、先这样 然后这样 在那样 你懂的撒~
5、完整代码如下 :
page/common/map.js
代码:
export function mymap(ak) {
// 此处ak 是你百度地图获取的密钥
return new Promise(function(resolve, reject) {
window.init = function() {
resolve(mymap)
}
var script = document.createElement('script')
script.type = 'text/javascript'
script.src = `//api.map.baidu.com/api?v=2.0&ak=${
ak}&callback=init`
script.onerror = reject
document.head.appendChild(script)
})
}
代码中使用 uview 框架 u-input 、 u-button 可自行替换为input 、button
将密钥
复制 到this.ak
即可使用
map.vue
代码:
<template>
<view class="app">
<view class="allmap-container" v-show="show"<