Vue的百度地圖插件嘗試

時間 2019-11-10

標籤 vue 百度地圖插件嘗試简体版

原文原文鏈接

百度地圖插件

安裝

CDN全局安裝

<script src="https://unpkg.com/vue-baidu-map"></script>

插件的引入

Vue.use(VueBaiduMap.default, {
    ak: 'YOUR_APP_KEY',
})

ak 是在百度地圖開發者平臺申請的密鑰詳見 http://lbsyun.baidu.com/apico... */html

地圖視圖

BmView 是用於渲染百度地圖實例可視化區域的容器vue

使用 Bmview 渲染一個地圖實例：api

<template id="baidu">   
    <baidu-map class="map">
        <bm-view style="position: absolute; top: 60px; bottom: 20px; left: 20px; right: 20px"></bm-view>
    </baidu-map>
</template>

給地圖添加一個縮放控件ui

<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>

把控件放到咱們渲染的地圖實例裏就能夠了spa

效果以下：插件

完整代碼以下：code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>baidumap</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-baidu-map"></script>
    <style>
        #map{
            width: 1000px;
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="map">
        <baidu></baidu>
    </div>
    <template id="baidu">
            
        <baidu-map class="map">
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <bm-view style="position: absolute; top: 60px; bottom: 20px; left: 20px; right: 20px"></bm-view>
        </baidu-map>
    
    </template>
    <script>
        Vue.use(VueBaiduMap.default, {
            ak: 'YOUR_APP_KEY',
        })
        Vue.component("baidu",{
            template:'#baidu'
        })
        new Vue({
            el:'#map'
        })
    </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。