营销型网站建设的一般过程包括哪些环节?,古玩网站建设意义,青岛公司注册网站,wordpress 写php代码企业官网上需要用到地图应用#xff0c;这里对百度地图API的使用做点笔记#xff0c;好记性不如烂笔头。
实现地图应用的流程如下#xff1a;
1、获取密钥#xff1b;教程网址 https://jingyan.baidu.com/article/363872eccda8286e4aa16f4e.html
2、在html的head头部引入…企业官网上需要用到地图应用这里对百度地图API的使用做点笔记好记性不如烂笔头。
实现地图应用的流程如下
1、获取密钥教程网址 https://jingyan.baidu.com/article/363872eccda8286e4aa16f4e.html
2、在html的head头部引入百度地图的API如
script typetext/javascript srchttp://api.map.baidu.com/api?v2.0ak您的密钥/script
3、根据API文档创建容器、绘制地图、添加各种控件。详细如下代码
div idmapContainer stylewidth:500px;height:400px;border:1px solid gray;/div
script
function initialize() {
//创建地图实例
var map new BMap.Map(mapContainer); //地图渲染到了idmapContainer的DOM元素上
//创建一个坐标
var point new BMap.Point(113.946567,22.531604);
//地图初始化设置中心点坐标和地图级别
map.centerAndZoom(point,14);
var myIcon new BMap.Icon(http://api.map.baidu.com/img/markers.png, new BMap.Size(23, 25)); //替换掉标注的图片
var marker new BMap.Marker(point,{icon: myIcon}); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
//map.enableKeyboard(); // 启用键盘操作。
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl({
anchor : BMAP_ANCHOR_BOTTOM_RIGHT, //右下角
offset : new BMap.Size(290,10) //进一步控制缩放按钮的水平竖直偏移量
})); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl({isOpen:true})); //添加缩略地图控件
map.addControl(new BMap.MapTypeControl( {
anchor : BMAP_ANCHOR_BOTTOM_RIGHT, //右下角
offset : new BMap.Size(160,10) //进一步控制缩放按钮的水平竖直偏移量
})); //地图类型
var label new BMap.Label(深圳赛动生物自动化有限公司,{offset:new BMap.Size(15,-20)});
marker.setLabel(label); //添加公司label
}window.onload initialize;
/script
开发中遇到的一些问题的记录
1、如何获取目标点的坐标点地图中心点比如公司位置坐标百度地图提供了一个坐标拾取器工具界面可以参考使用教程获取https://jingyan.baidu.com/article/f96699bbafdccc894e3c1b8b.html
2、默认是没有鼠标滚动缩放大小、平移缩放、缩略地图、比例尺、标注、三维地图类型等功能需要如上述代码分别添加。
3、如何隐藏左下角地图的版权信息如下
style.anchorBL{display:none;}/style4、在标注旁显示公司名的标注更换标注的图标
var label new BMap.Label(深圳赛动生物自动化有限公司,{offset:new BMap.Size(15,-20)});
marker.setLabel(label); //添加公司labelvar myIcon new BMap.Icon(http://api.map.baidu.com/img/markers.png, new BMap.Size(23, 25));
var marker2 new BMap.Marker(point, {icon: myIcon});
map.addOverlay(marker2);
5、右下角的缩略地图是折叠的怎么保持常开
map.addControl(new BMap.OverviewMapControl({isOpen:true})); //添加缩略地图控件
6、百度离线地图开发待完善 百度地图API使用官网http://lbsyun.baidu.com/index.php?titlejspopular/guide/maplayer
网络教程参考网址https://www.cnblogs.com/yfsmooth/p/4695831.html 这里附加一个迅速地图实现的工具http://api.map.baidu.com/lbsapi/creatmap/index.html 可以直接配置参数获取代码
