js调取百度地图，展示公司位置

首先引用百度地图js

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nSxiPohfziUaCuONe4ViUP2N"></script>

界面定义div 主要注意id

 <div style="width:600px;height:480px;border:1px solid gray;margin:30px auto" id="container"></div>

引用初始化百度api

<script>$(function(){

//新建一个地图上点
var points = [{"lng":    116.29375 ,"lat":  39.837923 ,"url":"http://www.xinruihy.com/"  ,"id":"信睿浩扬",   "name":"北京市时代财富天地"}
];
//116.29375,39.837923
//创建标注点并添加到地图中
function addMarker(points) {//循环建立标注点for(var i=0, pointsLen = points.length; i<pointsLen; i++) {var point = new BMap.Point(points[i].lng, points[i].lat); //将标注点转化成地图上的点var marker = new BMap.Marker(point); //将点转化成标注点var label1=points[i].name;var label = new BMap.Label(label1, {offset: new BMap.Size(15, -25)});marker.setLabel(label);map.addOverlay(marker);  //将标注点添加到地图上marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画//添加监听事件(function() {var thePoint = points[i];marker.addEventListener("click",function() {showInfo(this,thePoint);});})();}
}
function showInfo(thisMarker,point) {//获取点的信息var sContent ='<ul style="margin:0 0 5px 0;padding:0.2em 0">'+'<li style="line-height: 26px;font-size: 15px;">'+'<span style="width: 50px;display: inline-block;">名称：</span>' + point.id + '</li>'+'<li style="line-height: 26px;font-size: 15px;">'+'<span style="width: 50px;display: inline-block;">地址：</span>' + point.name + '</li>'+'<li style="line-height: 26px;font-size: 15px;"><span style="width: 50px;display: inline-block;">查看：</span><a href="'+point.url+'">详情</a></li>'+'</ul>';var infoWindow = new BMap.InfoWindow(sContent); //创建信息窗口对象thisMarker.openInfoWindow(infoWindow); //图片加载完后重绘infoWindow
}//创建地图
var map = new BMap.Map('container');
map.centerAndZoom(new BMap.Point(116.29375,39.837923), 14);  // 设置中心点
map.setCurrentCity("朝阳区");          //设置为
map.addControl(new BMap.MapTypeControl());
map.enableScrollWheelZoom(true);
addMarker(points);

   })
</script>

其他相关详细配置可查考https://www.cnblogs.com/zqzjs/p/5293698.html

js调取百度地图，展示公司位置相关推荐

百度地图实现公司位置的定位，可拖动修改公司位置。
百度地图实现公司位置的定位,可拖动修改公司位置.只需要维护x轴和Y轴的数据到数据库就可以了可拖动,可搜索. <html><head><script src=" ...
第三方百度地图-----展示所在位置显示小圆点
build sourceSets {main {jni.srcDirs=[]jniLibs.srcDirs = ['libs']}} 清单文件----value创建的key值 <meta-dat ...
用百度地图定位公司位置-步骤详解
1.打开百度地图开发页面页面网址:http://lbsyun.baidu.com/ 2.找到开发文档下的地图生成器 3.修改当前位置 4.获取代码 5.复制代码 6.修改密钥若是没有密钥,得申请一 ...
百度地图展示附近1公里范围内的目标
需求从DB中检索附近一公里内的数据,并在百度地图展示: Note: 主要用于从本地数据表中查询符合条件的目标: 效果展示总结 (1) 覆盖物样式设置 // 圆形覆盖物 var circle = n ...
js百度地图小车html,Web js实现百度地图实时轨迹画线小车车行驶轨迹 | 彬菌
版权声明:转载原创文章请以超链接形式请注明原文章出处,尊重作者,尊重原创! 恰饭广告注意: 1.百度地图ak换成自己在百度地图官网申请 2.建议使用firefox浏览器,google被墙无法调用gp ...
根据百度地图经纬度获取位置信息
/*** 根据百度地图经纬度获取位置信息 **/ public class BaiduMapUtils {// 百度地图秘钥static String ak = "此处添加你的百度地图秘钥& ...
前端（1）js：百度地图api使用
(1)百度地图API链接 1)获取key http://lbsyun.baidu.com/apiconsole/key 2)查看相关API文档 http://lbsyun.baidu.com/inde ...
android h5调用百度地图,h5页面如何调用百度地图获取当前位置（代码）
本篇文章给大家带来的内容是关于h5页面如何调用百度地图获取当前位置(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在项目中越来越多的用到了手机的GRS定位功能,使用百度地图A ...
百度地图根据经纬度计算距离php,详解js根据百度地图提供经纬度计算两点距离...
正常在使用百度地图时,我们可以通过BMap的实例对象提供的方法计算距离: var map = new BMap.Map('map_canvas'); map.getDistance(point1 ,p ...

js调取百度地图，展示公司位置

js调取百度地图，展示公司位置相关推荐

最新文章

热门文章