vue百度地图 + 定位的详解
程序员文章站
2023-12-03 09:10:16
vue 百度地图 + 定位
前提需要自己有百度的密钥,如没有可以去百度地图申请
一、在主目录下的index.html引入js,例如:
...
vue 百度地图 + 定位
前提需要自己有百度的密钥,如没有可以去百度地图申请
一、在主目录下的index.html引入js,例如:
二、在webpack.base.conf.js配置文件中配置bmap,在module.exports 中与entry平级,例如:
三、在项目中引入bmap:
四、代码:
<template> <div class="home"> <div id="allmap" class="allmap"></div> </div> </template> <script> import {getstore, setstore, removestore} from '@/config/utils' import bmap from 'bmap' export default { data () { return { type: 'tab', address_detail: null, center: {lng: 116.40387397, lat: 39.91488908} } }, mounted () { this.ready() }, methods: { ready () { let map = new bmap.map('allmap') let point = new bmap.point(this.center.lng, this.center.lat) map.centerandzoom(point, 10) map.enablescrollwheelzoom(true) map.enabledoubleclickzoom(true) var geolocation = new bmap.geolocation() geolocation.getcurrentposition((r) => { if (r.point) { this.center.lng = r.longitude this.center.lat = r.latitude let markers = new bmap.marker(r.point) map.addoverlay(markers) map.panto(r.point) map.centerandzoom(r.point, 16) } }, { enablehighaccuracy: true }) } } } </script> <style> #allmap{ width: 100%; height: 15rem; } </style>
五、效果:
如有错误地方,请留言指教,谢谢大家
以上所述是小编给大家介绍的vue百度地图 + 定位详解整合,希望对大家有所帮助