Vue系列:如何将百度地图包装成Vue的组件
主要分解为如下步骤:
},
<template>
<!--<div id="allmap" style="width: 100%; height: {{mapHeight}}px"></div>-->
<!--<div id="allmap":style="{width: '100%', height: mapHeight + 'px'}"></div>-->
<div id="allmap" v-bind:style="mapStyle"></div>
</template>
<script>
exportdefault{
data:function(){
return{
mapStyle:{
width:'100%',
height:this.mapHeight +'px'
}
}
},
props:{
// 地图在该视图上的高度
mapHeight:{
type:Number,
default:500
},
// 经度
longitude:{
type:Number,
default:116.404
},
// 纬度
latitude:{
type:Number,
default:39.915
},
description:{
type:String,
default:'天安门'
}
},
ready:function(){
var map =newBMap.Map("allmap");
var point =newBMap.Point(this.longitude,this.latitude);
var marker =newBMap.Marker(point);
map.addOverlay(marker);
map.centerAndZoom(point,15);
// 信息窗的配置信息
var opts ={
width :250,
height:75,
title :"地址:",
}
var infoWindow =newBMap.InfoWindow(this.description, opts);// 创建信息窗口对象
marker.addEventListener("click",function(){
map.openInfoWindow(infoWindow,point);
});
map.enableScrollWheelZoom(true);
map.openInfoWindow(infoWindow,point);//开启信息窗口
}
}
</script>
<!--Add"scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Vue系列:如何将百度地图包装成Vue的组件的更多相关文章
- vue项目中使用百度地图的方法
1.在百度地图申请密钥: http://lbsyun.baidu.com/ 将 <script type="text/javascript" src="http: ...
- 使用Vue Baidu Map对百度地图实现输入框搜索定位
前端时间需要在页面的输入框输入地址,搜索并在百度地图上获取选定结果的坐标,前端使用了Vue + Element-ui,地图方面直接使用了封装好的百度地图vue组件-vue-baidu-map ...
- 微信小程序--百度地图坐标转换成腾讯地图坐标
最近开发小程序时出现一个问题,后台程序坐标采用的时百度地图的坐标,因为小程序地图时采用的腾讯地图的坐标系,两种坐标有一定的误差,导致位置信息显示不正确.现在需要一个可以转换两种坐标的方法,经过查询发现 ...
- vue 项目中引用百度地图
新建map.js export const BaiduMap = { init: function() { const BMapURL = 'https://api.map.baidu.com/api ...
- 在Vue框架中使用百度地图
1.首先在index.html中引入百度地图 <script type="text/javascript" src="http://api.map.baidu.co ...
- Vue中加载百度地图
借助百度地图的 LocalSearch 和 Autocomplete 两个方法 实现方式:通过promise以及百度地图的callback回调函数 map.js 1 export function M ...
- Vue系列教程(一)之初识Vue
一.Vue和MVVM Vue是一个渐进式的js框架,只注重视图层,结合了HTML+CSS+JS,非常的易用,并且有很好的生态系统,而且vue体积很小,速度很快,优化很到位. Vue技术周四MVVM开发 ...
- Vue系列:在vux的popup组件中使用百度地图遇到显示不全的问题
问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...
- Qt的QWebChannel和JS、HTML通信/交互驱动百度地图
Qt的QWebChannel和JS.HTML通信/交互驱动百度地图 0 前言 我一个研究嵌入式的,不知道怎么就迷上了上位机,接了几个项目都是关于Qt,这个项目还是比较经典的,自己没事儿的时候也进行研究 ...
随机推荐
- 写在复习MVC后
MVC的一些 今天把MVC复习了下,包括官方文档以及各种中文博客. 官方文档里面最能说明的问题的图片,相对于传统的MVC,苹果分离了View和Model之间的通信,实现了更好的复用性.我觉得MVC更 ...
- Virtual Box 杂记
1. Virtual Box后台运行 a. VBoxManage startvm yourvmname --type headlessb. VBoxHeadless --startvm yourvmn ...
- C#语言——类
C#——类 一.String 类 系统内置的处理字符串类型的函数方法类.方便我们对字符串类型进行一系列的处理. 1.Length:获取字符串的长度,返回一个int类型的值 string x=Conso ...
- itext 实现pdf打印数字上标和下标
https://kathleen1974.wordpress.com/category/itext-pdf/ In one of my project, we need to give the use ...
- C#设计模式(21)——责任链模式
一.引言 在现实生活中,有很多请求并不是一个人说了就算的,例如面试时的工资,低于1万的薪水可能技术经理就可以决定了,但是1万~1万5的薪水可能技术经理就没这个权利批准,可能就需要请求技术总监的批准,所 ...
- my_shell
#include<stdio.h> #include<unistd.h> #include<string.h> #include<stdlib.h> # ...
- Android,LIstView中的OnItemClick点击无效的解决办法
在List_Item布局文件中的根节点加上如下背景标黄的这一行 <?xml version="1.0" encoding="utf-8"?> < ...
- 【转】在Android布局中使用include和merge标签
内容转自:http://fengweipeng1208.blog.163.com/blog/static/21277318020138229754135/ 在我们开发android布局时,经常会有很多 ...
- 微信支付 总提示get_brand_wcpay_request:fail 也不跳转支付页面 的解决方案
最近在做微信支付,帮客户部署好环境后,测试微信支付,发现点击支付后老是提示: get_brand_wcpay_request:fail, 于是找到代码中调用微信支付的代码段: WeixinJSBrid ...
- url 特殊字符
URL中的特殊字符 有些符号在URL中是不能直接传递的,如果要在URL中传递这些特殊符号,那么就要使用他们的编码了.编码的格式为:%加字符的ASCII码,即一个百分号%,后面跟对应字符的ASCII(1 ...