Map.vue

<template>
<div class="Map" :style="{
height: this.height+'px',
width:this.width+ 'px'
}">
<div id="allmap"></div>
</div>
</template> <script>
/* eslint-disable quotes,camelcase */ import {MP} from "./js/map"
// import {MP} from "./js/BMap"
// import {Change} from './js/changeJingwei'
export default {
name: 'Map',
data () {
return {
ak: 'oWk8ofl3pI7jt4P9nng4cw2zyOQhY3pi'
}
},
mounted() {
this.$nextTick(function () {
MP("oWk8ofl3pI7jt4P9nng4cw2zyOQhY3pi").then( BMap => {
var th = this
var map = new BMap.Map("allmap"); // 创建Map实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point,15);
map.enableScrollWheelZoom();
var myValue
myValue = this.province+ this.city+ '' + '' + this.name; //传入相应参数 省、市、区、街道、名称 (内容可以为空)
setPlace();
function setPlace(){
map.clearOverlays(); //清除地图上所有覆盖物
function myFun(){
th.userlocation = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
map.centerAndZoom(th.userlocation, 16);
map.addOverlay(new BMap.Marker(th.userlocation)); //添加标注
}
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: myFun
});
local.search(myValue);
}
})
})
},
props: {
province: {
type: String
},
name: {
type: String
},
city: {
type:String
},
height: {
type: Number
},
width: {
type: Number
}
},
methods: {
sad(){
let map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.331398, 39.897445), 10);
map.enableScrollWheelZoom(true);
map.clearOverlays();
console.log(data.result.location.lng);
console.log(data.result.location.lat);
let new_point = new BMap.Point(data.result.location.lng, data.result.location.lat);
let marker = new BMap.Marker(new_point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(new_point);
map.setCurrentCity(this.province); // 设置地图显示的城市 此项是必须设置的
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#allmap {
height: 100%;
width: 100%;
}
</style>

map.js

export function MP(ak) {
return new Promise(function (resolve, reject) {
window.init = function () {
resolve(BMap)
}
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";
script.onerror = reject;
document.head.appendChild(script);
})
}

你们的支持,是我坚持的动力~

vue引入百度地图api组件封装(根据地址定位)的更多相关文章

  1. react 引入 百度地图API

    使用 Echarts 的地图的时候,发现报错,说 Bmap api is not loaded 百度地图API没有加载 乍一想,Echarts 用的也是 百度地图 啊,没有引入百度地图,还用个啥,当然 ...

  2. 百度地图API 显示区域边界及地名定位

    百度地图API 显示区域边界及地名定位 这个定位一共用了两个方法组成 一个是定位绘制区域边界线,另一个是地名定位 原理: 当用户输入省.市.县.区这种大地名时,我们要定位用户输入的这个位置,并显示轮廓 ...

  3. vue中百度地图API的调用

    1.使用百度地图api需要使用jsonp,来获取百度api的返回,因为vue不自带jsonp所以需要下载 安装jsonp npm i vue-jsonp -S 引入jsop import Vue fr ...

  4. 百度地图API调用实例之地址标注与位置显示

    之前弄了个谷歌地图API标注的调用实例,后来要求改成百度地图. 感谢主,通过网上资料(百度地图API,百度地图API详解之地图标注)收集及研究, 终于把百度地图标注和显示功能实现出来了,具体实现方法如 ...

  5. java 基于百度地图API GPS经纬度解析地址

    首先这是百度地图api 的接口地址,基于接口的参数,不过多介绍,其中都提供相应的介绍: http://lbsyun.baidu.com/index.php?title=webapi/guide/web ...

  6. 解决Vue引入百度地图JSSDK:BMap is undefined 问题

    百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入 异步加载 解决跨域问题,实例调用百度地图 但vue项目中仅某一两个页面需要用到百度地图,所以不想在 index.html ...

  7. vue引入百度地图 --BMap is not defined ,eslint BMap报错

    在mounted初始化地图的时候,因为异步问题会导致BMap is not defined,也就是百度的api还没完全引入或者加载完成,就已经进行地图初始化了 解决方法: 1.创建一个map.js e ...

  8. vue结合百度地图Api实现周边配置查询及根据筛选结果显示对应坐标详情

    在我们平常写房地产相关项目的时候经常会用到百度地图,因为这一块客户会考虑到房源周围的配套或者地铁线路所以在这类项目中就不可以避免的会用到百度地图,当然这只是其中一种,其他地图工具也可以,因为我这个项目 ...

  9. 百度地图api之----根据用户ip定位城市

    LocalCity 这个类是利用用户IP地址去百度数据库里查询得到IP所在的城市,用法如下: var objCity = new BMap.LocalCity(); objCity.get(funct ...

随机推荐

  1. Spring依赖注入的简化配置

    一, 很久很久以前, 当我们不用@Autowire注解时, 依赖注入要么通过setter方法, 要么通过构造方法; 需要在配置文件里配置一大堆property-ref.......... 二, 若使用 ...

  2. PyCharm中光标变粗的解决方法

    pycharm中光标变粗,如下: 原因:光标进入了改写状态. 解决方法:按一下键盘中的Insert键就好了.

  3. C++STL之String

    本文直接转载,非原创!仅记录供自己学习之用. 出处:http://blog.csdn.net/y990041769/article/details/8763366 在学习c++STL中的string, ...

  4. 从用eclipse还是idea所想到的

    最近一直在用idea做开发,刚开始用起来还是不熟,毕竟上次用idea还是研三在某知名互联网实习的时候,在学校和上家公司都用的是eclipse,然后就想,为什么有的公司用eclipse,有的公司用ide ...

  5. TensorFlow学习笔记2——数据类型及简单运算

    0. 小试牛刀 首先,激活tensorflow环境( source activate tensorflow ),随后在ipython里: import tensorflow as tf sess = ...

  6. 17个新手常见Python运行时错误

    当初学 Python 时,想要弄懂 Python 的错误信息的含义可能有点复杂.这里列出了常见的的一些让你程序 crash 的运行时错误. 1)忘记在 if , elif , else , for , ...

  7. 流程控制------if else分支语句

    一.If`······else语句:如果条件成立,就执行在语句体... 语法:if    条件:   语句体1   语句体2   语句体3 ··········· 例如: 1. if True:   ...

  8. [UWP]了解模板化控件(5.2):UserControl vs. TemplatedControl

    1. UserControl vs. TemplatedControl 在UWP中自定义控件常常会遇到这个问题:使用UserControl还是TemplatedControl来自定义控件. 1.1 使 ...

  9. logstash结合zabbix报警安装部署

    cd /usr/share/logstash/ vim Gemfile source "https://ruby.taobao.org/" ##修改成国内镜像站 source &q ...

  10. tomcat替换.class文件并没有生效的原因(失效原因)(转)

    紧急关头难免会替换class文件,但一定要注意一下几点. 1.小心class内中的project 的类的后,替换文件需要加上 $classMapper这个类, 编译成class的时候,会把public ...