web端调百度地图页面
在点击进入地图的入口(下面数据是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&ak=ztcvocCR1iGzerE5RhLXWHSjPQsZ6X9G"></script>
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=ztcvocCR1iGzerE5RhLXWHSjPQsZ6X9G&services=&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端调百度地图页面的更多相关文章
- 【web端】百度地图api
百度地图js加载 页面引入: 修改申请的密钥:<script type="text/javascript" src="http://api.map.baidu.co ...
- web开发调用百度地图API + AK申请
web开发调用百度地图API + AK申请 要使用百度地图的API我们首先需要在我们的html页面引入js----`` 如何获取百度地图ak: 1.登陆百度地图开发者平台 2.注册百度开发者账号并登陆 ...
- 应用市场高速下载以及网页端调起APP页面研究与实现
Github博文地址,此处更新可能不是很及时. 好久没写博客了,好大一个坑.正好,最近刚做完应用市场的高速下载功能,便拿来填了这个坑. 话说产品为了增加用户量,提升用户活跃度以及配合推广,更坑爹的是看 ...
- 应用市场快速下载以及网页端调起APP页面研究与实现
Github博文地址,此处更新可能不是非常及时. 好久没写博客了,好大一个坑. 正好,近期刚做完应用市场的快速下载功能,便拿来填了这个坑. 话说产品为了添加用户量,提升用户活跃度以及配合推广,更坑爹的 ...
- 团队项目:安卓端用百度地图api定位显示跑道
因为安卓调用api对我来说是一个完全陌生的领域,我在经过很长时间终于弄出来了,这段时间还是很有成效的,我得到了历练. 第一步:注册成为百度开发者 在百度地图开放平台创建应用.地址http://lbsy ...
- web html调用百度地图
如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/creatmap/,搜 ...
- web端调起Windows系统应用程序(exe执行文件),全面兼容所有浏览器
1. 首先,你要有一个exe可执行文件2. 创建注册表创建注册表有两种方式(以“MyApp.exe”为例): 方式一:可视化编辑Win+R 打开运行,输入 regedit 并回车,进入注册表编辑器新建 ...
- html5移动端根据百度地图api获取详细地址
<script type="text/javascript" src="js/BMap.js" ></script> <scrip ...
- Xamarin.Android 使用百度地图获取定位信息
最近做一个项目,web端使用百度地图,PDA使用手持机自带的GPS定位系统获取经纬度,然后再百度地图上显示该经纬度会有一定距离的差异,这里就像可乐的瓶子拧上雪碧的盖子,能拧的上却不美观.所以为了数据的 ...
随机推荐
- 20155216 2016-2017-2 《Java程序设计》第九周学习总结
20155216 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 JDBC架构 JDBC API的使用 JDBC连接数据库 1.导入JDBC包: 添加impo ...
- sql心经
问题: 查数据是一件很痛苦的事,尤其是多张表链接查询更是惨不忍睹 各种条件拼接,各种查询数据不对,看着写了半天的sql,感觉很完美,没毛病啊... 分析: http://blog.jobbole.co ...
- day3 前奏
1.第1个c语言 编辑---编译----运行 python@ubuntu:~/Desktop/pythons06$ vim -第1个c语言.c #include<stdio.h> int ...
- SRM 653 CountryGroupHard
SRM 653 CountryGroupHard 题意: n 个人坐成一排,同一个国家的人坐在一起,记者问了一些人他们的国家有多少人,他们都回答了正确的信息.已知m条信息,每条信息形如第 pi 个位置 ...
- RegExp,实现匹配合法邮箱(英文邮箱)的正则表达式
邮箱列表:@qq.com.@vip.qq.com.@foxmail.com,数字邮箱暂时不考虑 以下邮箱列表用于测试: lihaha@qq.com lihaha@vip.qq.com lihaha@f ...
- L018-课前练习以及知识巩固笔记
L018-课前练习以及知识巩固笔记 OK,今天课前做了几道题,算是对以往知识的巩固. 1.请描述下列路径的内容是做什么的?/etc/sysctl.conf/etc/rc.local/etc/hosts ...
- Angular开发者手册重点翻译之指令(一)
创建自定义的指令 这个文章将解释什么需要在自己的angularjs应用中创建自己的指令,以及如何实现它. 什么是指令 在高的层面上讲,指令是DOM元素中的标记(例如一个属性,一个节点名,注释或者CSS ...
- Query类型_JDBC的方法_JAVA方法_Loadrunner脚本
数据库查询压力测试脚本 jdbc_java_查询类型接口测试 package com.test; import java.sql.Connection; import java.sql.DriverM ...
- windows下sublime text的node.js开发环境搭建
首先安装sublime text3,百度一堆,自己找吧.理论上sublime text2应该也可以.我只能说一句:这个软件实在是太强悍了. 跨平台,丰富的插件体系,加上插件基本上就是一个强悍的ide了 ...
- 使用Mininet创建网络拓扑
使用Mininet创建Topo Python脚本实现创建拓扑 #coding:utf-8 from mininet.net import Mininet from mininet.topo impor ...