百度地图使用步骤

有百度帐户 


http://lbsyun.baidu.com/apiconsole/key==>创建应用,获取key




----------以下是在html页面中要放的内容---------------------


<script type=text/javascript src="http://api.map.baidu.com/api?v=1.5&ak=你申请的key"></script>

引入的js视自己具体情况而定



<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("mapcontainer");  
var point = new BMap.Point(经纬度);  
map.centerAndZoom(point, 16);  
map.enableScrollWheelZoom();  
var marker = new BMap.Marker(new BMap.Point(经纬度));
map.addOverlay(marker);
var licontent="<b>客户公司名称</b><br>";  
        licontent+="<span><strong>地址:</strong>客户公司地址</span><br>";  
    licontent+="<span><strong>电话:</strong>客户的电话</span><br>"; 
var opts1 = {
width : 300
};
var infoWindow = new BMap.InfoWindow(licontent, opts1);
marker.openInfoWindow(infoWindow);  
</script>


根据地址查询经纬度地址:
http://api.map.baidu.com/lbsapi/getpoint/index.html
查询到的经纬度填入上面  (经纬度) 的括号里


<!--装地图的div-->
<div id="mapcontainer" style="width:645px;height:370px;margin:10px 


0px;float:left;display:block;border:2px #ff6600 solid;"></div>

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
umiMax是一款基于React开发的地图组件库,支持多种地图服务商,包括百度地图。以下是umiMax引入百度地图的详细步骤: 1. 安装umiMax 使用npm或yarn安装umiMax: ``` npm install umi-max --save ``` 或者 ``` yarn add umi-max ``` 2. 引入百度地图 在需要使用百度地图的组件中引入相应的地图组件: ```jsx import { BaiduMap } from 'umi-max'; function Map() { return ( <BaiduMap ak="百度地图AK" center={{ lng: 116.404, lat: 39.915 }} zoom={13} style={{ height: '500px' }} /> ); } export default Map; ``` 其中,`ak`是申请的百度地图AK,`center`是地图中心点坐标,`zoom`是地图缩放级别,`style`是地图容器的样式。 3. 设置百度地图样式 默认情况下,umiMax使用百度地图的默认样式。如果需要自定义地图样式,可以通过`BaiduMap`组件的`mapStyle`属性指定: ```jsx <BaiduMap ak="百度地图AK" center={{ lng: 116.404, lat: 39.915 }} zoom={13} style={{ height: '500px' }} mapStyle={{ styleJson: [ { featureType: 'water', elementType: 'all', stylers: { color: '#d1d1d1', }, }, { featureType: 'land', elementType: 'all', stylers: { color: '#f3f3f3', }, }, { featureType: 'highway', elementType: 'all', stylers: { visibility: 'off', }, }, ], }} /> ``` 其中,`styleJson`是自定义的地图样式,可以参考百度地图样式编辑器进行配置。 4. 其他属性和事件 `BaiduMap`组件还支持其他属性和事件,例如: - `showControl`:是否显示地图控件,默认为true; - `onLoad`:地图加载完成时的回调函数; - `onMapClick`:地图点击事件的回调函数; - `onZoomEnd`:地图缩放完成时的回调函数。 更多属性和事件可以参考umiMax的文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值