页面联系我们加入地图map

1、首先要有密钥，可以自己注册获取或复制别人的。搜索百度地图API

2、地图示例

　　<head><meta charset="UTF-8"><title></title><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=weuMwIVhzBCjZgGaPA5SVOQV"></script> //这里是引入，ak=您的密钥　　　　<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的密钥&s=1"></script> //如果是https的网站，后面要加&s=1 </head><style>*{margin:0;padding:0;}#container{margin:50px auto;width:800px;height:600px;border:2px solid #F65F57;} </style><body><div id="container"></div>  //显示地图的div<script type="text/javascript">var map= new BMap.Map('container'); // 创建地图实例  var point= new BMap.Point(114.059627,22.627415); // 创建点坐标
            map.centerAndZoom(point,16);    // 初始化地图，设置中心点坐标和地图缩放级别
            map.addControl(new BMap.NavigationControl());  //添加平移缩放控件，左上方位置
            map.addControl(new BMap.ScaleControl());//添加比例尺控件，左下方位置
            map.addControl(new BMap.MapTypeControl());//地图类型控件，右上方位置
            map.addControl(new BMap.OverviewMapControl()); var marker = new BMap.Marker(point); // 创建标注
            map.addOverlay(marker);   // 将标注添加到地图中
            msg = {    width : 300,     // 信息窗口宽度
                   height: 50,     // 信息窗口高度
                   title : "公司简介" , // 信息窗口标题
                   offset:new BMap.Size(8,-12) //调位置，相当于css相对定位relative
            }    // 创建信息窗口对象  ，写文字内容var infoWindow = new BMap.InfoWindow("<p>hello world!</p> <div style='color:red;'>客服电话：123456</div>", msg);    map.openInfoWindow(infoWindow, map.getCenter());      // 页面显示信息窗口</script></body>

如图：

转载于:https://www.cnblogs.com/luhailin/p/6639943.html

页面联系我们加入地图map相关推荐

php 离线 gis,在 Web 页面中使用离线地图
1. 所需工具&插件: 1. MapDownloader (提取码: spx6) 2. 操作: 1. 参考:java离线地图web GIS制作下载好所需地图瓦片,本文以百度地图/深圳为例 2 ...
echarts地图map
在vue中使用echarts绘制图表 npm install echarts --save // 全局安装echarts 具体代码及注释如下 : <template><div> ...
html页面插入百度谷歌地图的方法
html页面插入百度谷歌地图一.百度地图 1.打开"百度地图生成器"的网址:http://api.map.baidu.com/lbsapi/creatmap/index.html ...
android h5调用百度地图,h5页面如何调用百度地图获取当前位置（代码）
本篇文章给大家带来的内容是关于h5页面如何调用百度地图获取当前位置(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在项目中越来越多的用到了手机的GRS定位功能,使用百度地图A ...
html5唤起高德,h5页面唤醒百度高德地图
唤醒APP链接 //高德地图 window.location.href="androidamap://viewMap?sourceApplication=appname&poinam ...
微信小程序官方组件展示之地图map源码
以下将展示微信小程序之地图map源码官方组件能力,组件样式仅供参考,开发者可根据自身需求定义组件样式,具体属性参数详见小程序开发文档. 功能描述: 地图(v2.7.0 起支持同层渲染). 小程序解决方 ...
ROS中base_link, odom, fixed_frame, target_frame和虚拟大地图map的关系
前面已经介绍了如何使用URDF建造机器人小车并显示在Rviz的仿真环境里面,但是小车是静止的.下面介绍如何让它在Rviz里面动起来,并理清URDF,TF 和 odom 的关系. 1. ROS中base ...
php小程序地图处理,微信小程序地图map详解及简单实例
微信小程序地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...

页面联系我们加入地图map

页面联系我们加入地图map相关推荐

最新文章

热门文章