vue百度地图插件
发布时间:2020-12-14 04:15:27 所属栏目:大数据 来源:网络整理
导读:安装 npm i --save vue-baidu-map ? 代码 template div baidu-map v-bind:style= " mapStyle " class = " bm-view " ak= "你的百度地图ak " :center= " center " :zoom= " zoom " :scroll-wheel-zoom= " true " @click = " getClickInfo " @moving= " syncCe
安装 npm i --save vue-baidu-map ?
代码
<template> <div> <baidu-map v-bind:style="mapStyle" class="bm-view" ak="你的百度地图ak" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @click="getClickInfo" @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom"> <bm-view style="width: 100%; height:500px;"></bm-view> <bm-marker :position="{lng: center.lng,lat: center.lat}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"> </bm-marker> <bm-control :offset="{width: ‘10px‘,height: ‘10px‘}"> <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 999999}"> <input type="text" placeholder="请输入搜索关键字" class="serachinput"> </bm-auto-complete> </bm-control> <bm-local-search :keyword="keyword" :auto-viewport="true" style="width:0px;height:0px;overflow: hidden;"></bm-local-search> </baidu-map> </div> </template> <script> <style scoped> .serachinput { width: 300px; box-sizing: border-box; padding: 9px; border: 1px solid #dddee1; line-height: 20px; font-size: 16px; height: 38px; color: #333; position: relative; border-radius: 4px; -webkit-box-shadow: #666 0px 0px 10px; -moz-box-shadow: #666 0px 0px 10px; box-shadow: #666 0px 0px 10px; } </style> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |