在点击进入地图的入口(下面数据是vue渲染的数据)
<a class="navigation"  v-if="merchant.longitude && merchant.latitude"
href="http://api.map.baidu.com/marker?location={{merchant.latitude}},{{merchant.longitude}}&title={{merchant.name}}&content={{merchant.address}}&output=html&src=hair">//latitude,longitude经纬度,name店名,address详细地址
    <span><img src="../img/navigation.png"></span>
<span class="arrive">到店</span>
</a>
<a class="navigation" v-else
href="http://api.map.baidu.com/geocoder?address={{merchant.province + merchant.city + merchant.district + merchant.address}}&output=html&src=hair">
<span><img src="../img/navigation.png"></span>
<span class="arrive">到店</span>
</a>

在引用两段百度js文件
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=ztcvocCR1iGzerE5RhLXWHSjPQsZ6X9G"></script>
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&amp;ak=ztcvocCR1iGzerE5RhLXWHSjPQsZ6X9G&amp;services=&amp;t=20171031174121"></script>
var data = {
loc: JSON.parse(sessionStorage.getItem("loc")) || null, // 当前位置
};
var map;
function initMap() {
try {
map = new BMap.Map("l-map");
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
console.log('您的位置:' + r.point.lng + ',' + r.point.lat);//(lng,lat经纬度)
          sessionStorage.setItem("loc", JSON.stringify(r.point));
                data.loc = r.point;//data.loc后台返回数据
} else {
console.warn('failed\n' + this.getStatus());
data.loc = defaultPoint;
}
loadMerchantInfo();//调用后台数据
}, {enableHighAccuracy: true});
} catch (err) {
loadMerchantInfo();
}
}
if (data.loc) {
loadMerchantInfo();
} else {
initMap();
}

web端调百度地图页面的更多相关文章

  1. 【web端】百度地图api

    百度地图js加载 页面引入: 修改申请的密钥:<script type="text/javascript" src="http://api.map.baidu.co ...

  2. web开发调用百度地图API + AK申请

    web开发调用百度地图API + AK申请 要使用百度地图的API我们首先需要在我们的html页面引入js----`` 如何获取百度地图ak: 1.登陆百度地图开发者平台 2.注册百度开发者账号并登陆 ...

  3. 应用市场高速下载以及网页端调起APP页面研究与实现

    Github博文地址,此处更新可能不是很及时. 好久没写博客了,好大一个坑.正好,最近刚做完应用市场的高速下载功能,便拿来填了这个坑. 话说产品为了增加用户量,提升用户活跃度以及配合推广,更坑爹的是看 ...

  4. 应用市场快速下载以及网页端调起APP页面研究与实现

    Github博文地址,此处更新可能不是非常及时. 好久没写博客了,好大一个坑. 正好,近期刚做完应用市场的快速下载功能,便拿来填了这个坑. 话说产品为了添加用户量,提升用户活跃度以及配合推广,更坑爹的 ...

  5. 团队项目:安卓端用百度地图api定位显示跑道

    因为安卓调用api对我来说是一个完全陌生的领域,我在经过很长时间终于弄出来了,这段时间还是很有成效的,我得到了历练. 第一步:注册成为百度开发者 在百度地图开放平台创建应用.地址http://lbsy ...

  6. web html调用百度地图

    如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/creatmap/,搜 ...

  7. web端调起Windows系统应用程序(exe执行文件),全面兼容所有浏览器

    1. 首先,你要有一个exe可执行文件2. 创建注册表创建注册表有两种方式(以“MyApp.exe”为例): 方式一:可视化编辑Win+R 打开运行,输入 regedit 并回车,进入注册表编辑器新建 ...

  8. html5移动端根据百度地图api获取详细地址

    <script type="text/javascript" src="js/BMap.js" ></script> <scrip ...

  9. Xamarin.Android 使用百度地图获取定位信息

    最近做一个项目,web端使用百度地图,PDA使用手持机自带的GPS定位系统获取经纬度,然后再百度地图上显示该经纬度会有一定距离的差异,这里就像可乐的瓶子拧上雪碧的盖子,能拧的上却不美观.所以为了数据的 ...

随机推荐

  1. struts2框架实例

    一,Struts2框架介绍 它是一个View框架,对Servle进行了封装,使用核心过滤器对servlet进行了解耦,可以自动封装数据 核心是结果视图导航 二,程序实例 1.导入框架依赖包 2.注册框 ...

  2. jsp+servlet+javabean开发web项目

    一.介绍: 项目依赖包:jdbc数据库包 jsp+servlet+javabean开发web项目,是最接近web项目原生运行原理的. 但是,jsp内容混乱,项目结构复杂时,代码会混乱 二.运行原理: ...

  3. 成都Uber优步司机奖励政策(4月13日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  4. [cogs2314][HZOI 2015] Persistable Editor - 可持久化平衡树

    [cogs2314][HZOI 2015]Persistable Editor - 可持久化平衡树 题目链接 首先吐槽扯淡几句 [题目描述] 维护一种可持久化的文本编辑器,支持下列操作: 1 p st ...

  5. 搜索引擎ElasticSearch系列(一): ElasticSearch2.4.4环境搭建

    一:ElasticSearch简介 Elasticsearch is a distributed, RESTful search and analytics engine capable of sol ...

  6. 一个web应用的诞生(5)--数据表单

    下面把角色分为两种,普通用户和管理员用户,至少对于普通用户来说,直接修改DB是不可取的,要有用户注册的功能,下面就开始进行用户注册的开发. 用户表 首先要想好用户注册的时候需要提供什么信息:用户名.密 ...

  7. _INTSIZEOF

    在_INTSIZEOF中该有的都有了 1.这其中最小非负剩余和最大正余数例子如下: 设n为4,当r为1时,最小非负剩余就是1,最大非正剩余就是1 - 4 = -3,最大正余数为4 - 1 = 3 2. ...

  8. 初探C#

    初探.NET底层原理 学习C#离不开.net平台,因为微软的开发平台真的是太强大了,它为每一个开发者都做了太多太多,但是我们不仅要知道怎么用,而且也应该知道其中的内部到底包含了什么.本篇文章不仅讲一些 ...

  9. Django——test文件编写接口测试

    用自己建立的小网页来做接口测试,在Django的tests.py写下如下 test_login_page为用get方式登录login路径,根据回复验证是否查看到页面 test_login_action ...

  10. 4星|《财经》2018年第15期:电动飞机、无人小飞机、AI无人机

    <财经>2018年第15期 总第532期 旬刊 本期主题是AI.有多篇国内AI行业的比较深入的调查报告,比较有意思的有:电动飞机.无人小飞机.AI无人机.欧盟通用数据保护条例.Amazon ...