vue集成高德地图

Posted 2023-05-21 qijiangforever

<template>
    
    <div style="width:100%; height:100%; background-color:gray; display:flex; justify-content:center; align-items:center">

        <!-- loding-icon -->
        <div v-if="false" ><i class="el-icon-loading"></i></div>

        <!-- map -->
        <div v-if="true" id="container" style="width:99.4%; height:99%;"></div>
    </div>

</template>

<script>

//点击提示的窗口
var content = [
    "<div>北京天安门广场</div>"
];

export default 
    name: \'Map\',
    data() 
        return 
            flag: false,
            flagicon: true
        
    ,
    //页面加载完以后渲染
    mounted() 
        this.flag = true;
        // alert(this.flag)
        this.flagicon = false;
        
        // 创建地图实例 （必须）
        var map = new AMap.Map("container", 
            zoom: 13, //缩放级别
            center: [116.473195, 39.973253],  //经度纬度
            resizeEnable: true
        )

        //创建marke实例 （标记功能）
        var marker = new AMap.Marker(
            position: new AMap.LngLat(116.39, 39.9),  // 经纬度对象
            title: \'北京\'
        )

        //信息窗口 （信息窗口功能）
        var infoWindow = new AMap.InfoWindow(
            content: content.join("<br>")
        )

        //点击事件
        var clickHandler = function (e) 
            console.log(\'您在[\' + e.lnglat.getLng() + \',\' + e.lnglat.getLat() + \']的位置点击了地图!\')
            infoWindow.open(map,[116.39, 39.9])
        


        // 浏览器定位


        map.on(\'click\', clickHandler)
        map.add(marker)
    ,
    //页面创建时渲染
    created() 
        
    ,
    //方法调用
    methods: 

    

</script>

<style>

</style>

 

vue加载高德地图（原生）

参考技术A 1. 在 public 文件夹下的 index.html 中加入

///<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=你申请的key"></script>

2. 在 vue.config.js 文件中配置 externals

///module.exports =

  devServer:

    port: 57103 // 端口号配置

  ,

  configureWebpack:

    externals:

      'AMap': 'AMap' // 高德地图配置

   

注： vue.config.js 文件要自己创建，vue-cli 3.0 不会自动生成此文件。 此外，修改 vue.config.js 不会触发热加载，也就是修改之后你需要重新 run 一下你的项目，它才能生效。

3.加载地图

地图容器要给他一个宽高。

注：init() 方法请在 mounted 生命周期中调用，因为如果在 created 阶段调用，会找不到 html 元素 div#container

注2:若中途遇到 'map' is assigned a value but never used

可找到package.json中找到rules: 添加 "no-unused-vars":0

最终效果

高德API：https://developer.amap.com/api/javascript-api/guide/map/map-style