vue2.0组件如何使用高德地图

vue2.0直接使用高德地图


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <script src="vue.js">script>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=您申请的key值">script>
    <style>
        #container {width:300px; height: 180px; }
    style>
head>
<body>
<div id="app">
    <div id="container">div>
div>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom:11,
        center: [116.40, 39.91]
    });
    var vm = new Vue({
        el: '#app',
        data:{

        },
        methods: {

        },
    })
script>
body>
html>


可以显示

vue2.0组件如何使用高德地图_第1张图片



vue2.0组件上使用高德地图

安装

npm install vue-amap --save

引入vue-amap

vue-amap的引入方式很简单,在入口文件中加入下面内容

// 引入vue-amap
import AMap from 'vue-amap';
Vue.use(AMap);

// 初始化vue-amap
AMap.initAMapApiLoader({
    // 申请的高德key
    key: 'YOUR_KEY',
    // 插件集合
    plugin: ['']
});

显示地图

在模版中加入vue-amap的地图组件

 
  
<template>
    <div>
        <div id="container" style="width:500px; height:300px">div>
    div>
template>
<script>
    import AMap from 'AMap'
    var map
    export default {
        mounted: function () {
            this.init()
        },
        methods: {
            init: function () {
                map = new AMap.Map('container', {
                    center: [116.397428, 39.90923],
                    resizeEnable: true,
                    zoom: 10
                })
                AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
                    map.addControl(new AMap.ToolBar())
                    map.addControl(new AMap.Scale())
                })
            }
        }
    }
script>
<style>
style>

你可能感兴趣的:(Vue,JS,Jquery)