vue 高德地图标记_如何在vue里面调用高德地图「建议收藏」

vue 高德地图标记_如何在vue里面调用高德地图「建议收藏」1.修改webpac.base.conf.js文件与module同一级添加externals:{‘AMap‘:‘AMap‘,‘AMapUI‘:‘AMapUI‘}配置。然后在index页面引入文件接着下载包vue-amap,然后在vue页面中importAMapfrom‘AMap‘//在使用地图的页面引入该组件varmapexportdefault{mounted:functio…

大家好,又见面了,我是你们的朋友全栈君。

1.修改webpac.base.conf.js文件

与module同一级添加

externals: {

‘AMap‘: ‘AMap‘,

‘AMapUI‘: ‘AMapUI‘

}配置。

然后在index页面引入文件

接着下载包vue-amap,

然后在vue页面中

import AMap from ‘AMap‘//在使用地图的页面引入该组件

var map

export default {

mounted: function () {

this.init()

},

methods: {

init: function () {

map = new AMap.Map(‘container‘, {

center: [116.34301260000001, 39.9662898],

resizeEnable: true,

zoom: 10

})

//创建一个marker

var marker = new AMap.Marker({//在地图上显示自己的位置标记

position: [116.34301260000001, 39.9662898],//marker所在的位置

map:map//创建时直接赋予map属性

});

AMap.plugin([‘AMap.ToolBar‘, ‘AMap.Scale‘], function () {

map.addControl(new AMap.ToolBar())

map.addControl(new AMap.Scale())

})

}

}

}

这样基本的地图调用就OK啦

原文:http://www.cnblogs.com/wb336035888/p/7419699.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/143310.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • jQuery的下载以及使用[通俗易懂]

    jQuery的下载以及使用[通俗易懂]一、版本选择jQuery的版本有很多,大家在选择版本的时候,一般原则是越新越好,但其实不然,jQuery版本是在不断进步和发展的,最新版是当时最高技术水平,也是最先进的技术理念。如何选择jQuery版本是个值得思考的问题目前jQuery有三个大版本:1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4(2…

    2022年5月22日
    36
  • ios事件-触摸事件3(UIButton 和 pointInSide()、hitTest()、touchesBegan()、touchesMoved()、touchesEnded()的关系)

    ios事件-触摸事件3(UIButton 和 pointInSide()、hitTest()、touchesBegan()、touchesMoved()、touchesEnded()的关系)ios事件-触摸事件3(UIButton和pointInSide()、hitTest()、touchesBegan()、touchesMoved()、touchesEnded()、touchesCancelled()的关系)先看效果图本文中,凡是看到xxx(),即表示xxx是一个函数或者方法!!!事件分为事件传递和事件响应,其中,事件响应又称事件处理。具体代码ButtonVC的代码…

    2022年7月25日
    16
  • MemoryBarrier方法[通俗易懂]

    MemoryBarrier方法[通俗易懂]查了下MSDN的解释:MemoryBarrierisrequiredonlyonmultiprocessorsystemswithweakmemoryordering(forexample,asystememployingmultipleIntelItaniumprocessors).Syn…

    2022年7月12日
    15
  • python微信机器人库_Python微信机器人「建议收藏」

    python微信机器人库_Python微信机器人「建议收藏」1.需要用到的模块:requests:Requests是用Itchat:itchat是一个开源的微信个人号接口,使用python调用微信从未如此简单。使用不到三十行的代码,你就可以完成一个能够处理所有信息的微信机器人。当然,该api的使用远不止一个机器人,更多的功能等着你来发现,比如这些。该接口与公众号接口itchatmp共享类似的操作方式,学习一次掌握两个工具。如今微信已经成为了个人社交的很大…

    2022年6月18日
    29
  • 每天学一点 — CCriticalSection临界区

    每天学一点 — CCriticalSection临界区(转)类CCriticalSection的对象表示一个“临界区”,它是一个用于同步的对象,同一时刻只允许一个线程存取资源或代码区。临界区在控制一次只有一个线程修改数据或其它的控制资源时非常有用。例如,在链表中增加一个结点就只允许一次一个线程进行。通过使用CCriticalSection对象来控制链表,就可以达到这个目的。它就像是一把钥匙,哪个线程获得了它就获得了运行线程的权力,而把其他线程统统阻塞

    2022年7月20日
    13
  • js常用跳转代码[通俗易懂]

    js常用跳转代码[通俗易懂]今天整理下我们常用的js跳转代码,常用的js跳转代码比如:js倒计时跳转代码、pc站跳转手机站代码、在原来的窗体中直接js跳转用、在新窗体中打开页面用、js直接跳转代码、js返回代码、head标签内加如下代码实现页面定时自动跳转代码、self.location方式实现页面跳转、top.loca…

    2022年8月13日
    4

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号