【常用】网页调用百度地图美化版

功能描述:

在网页上调用百度地图API，以在公司联系页面上显示地图. （百度Map api版本2.0）

设置了百度自己的“高端灰色”样式，添加了注释百度地图网页版，信息窗口和单击事件百度地图网页版，并且支持鼠标滚轮缩放.

显示页面代码侧:

<div id="ContactMap" style="width:800px;height:500px;"></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=q627l8eVgZV1rm9hlenGTpKt"></script>
<script type="text/javascript" src="map.js"></script>

map.js文件

/* 百度地图API功能 */
var map = new BMap.Map("ContactMap",{minZoom:4,maxZoom:18});  // 创建Map实例  
map.setMapStyle({
    styleJson:[
        {
            "featureType": "all",
            "elementType": "all",
            "stylers": {
                "lightness": 10,
                "saturation": -100
            }
        }
    ]
});
var pt = new BMap.Point(120.207013,30.273802);    // 设置地图坐标
map.centerAndZoom(pt, 18);    // 初始化地图,设置中心点坐标和地图级别
loadmap();
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
function loadmap() {
    map.clearOverlays();
    /*
        //可在标注位置添加上LOGO icon
        var myIcon = new BMap.Icon("/static/logo.png", new BMap.Size(48, 44));
    */
    var marker = new BMap.Marker(pt); 
    map.addOverlay(marker);
    var data = '<div class="maptips"><div class="maptips_title" style="color:#3f292e;font-size:14px;font-weight:bold;margin-bottom: 10px;">浩然国际（香港）集团</div><div class="maptips_address" style="font-size:12px;" ><b>地址：</b>浙江省杭州市江干区秋涛北路130号省家电市场一楼</div></div>';
    var infoWindow = new BMap.InfoWindow(data);
    marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); });
    //map.openInfoWindow(infoWindow, map.getCenter()); 
}

如何添加自定义图片:

function loadmap() {
    map.clearOverlays();
    
    var myIcon = new BMap.Icon("/static/mapinfo.png", new BMap.Size(379,178));
    var marker = new BMap.Marker(pt,{icon:myIcon}); 
    map.addOverlay(marker);              // 将标注添加到地图中
   
}

--------------------------------------------------- -------------------------------------------------- -------------

参考:

百度Map API演示#a1_2

高端灰色样式（百度随附）

百度地图坐标拾取工具

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/shouji/article-208037-1.html