您现在的位置是：网站首页> 编程资料编程资料
vue3.0引入百度地图并标记点的实现代码_vue.js_
2023-05-24
416人已围观
简介 vue3.0引入百度地图并标记点的实现代码_vue.js_
首先新建一个js，主要用来引入百度地图的js，代码如下：
export function baiduMap() { return new Promise(function(resolve, reject) { window.baiduMap = function() { resolve() } var script2 = document.createElement('script') script2.type = 'text/javascript' script2.src = `http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js` var link = document.createElement('link') link.rel = 'stylesheet' link.href = `http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css` document.head.appendChild(link) document.head.appendChild(script2) var script = document.createElement('script') script.type = 'text/javascript' script.src = `http://api.map.baidu.com/api?v=3.0&ak=你的ak&callback=baiduMap` script.onerror = reject document.head.appendChild(script) }) }获取生成密匙： ak密匙(百度地图)
其次，创建baidu-map.vue,代码如下：
最后，在你需要用到的界面引用
引用界面的script的代码
import BaiduMap from "./baidu-map"; const mapRef = ref(null); /** * 查看地图 * @param selection */ function openMap() { mapRef.value.map(form.value.id) } 最终效果
参考：博客
以上就是vue3.0引入百度地图并标记点的详细内容，更多关于vue3.0百度地图标记点的资料请关注其它相关文章！
您可能感兴趣的文章:
