百度地图api3.0使用标注点以及标注信息个性化风格地图样例

最新推荐文章于 2024-07-09 14:42:59 发布

mrhao61

最新推荐文章于 2024-07-09 14:42:59 发布

阅读量9.6k

点赞数

分类专栏：日常

本文链接：https://blog.csdn.net/weixin_43870649/article/details/104184449

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
	
<title>疫情地图</title>
	<link rel="icon" href="images/favicon.ico">
<!--引用百度地图API-->
<style type="text/css">
    html,body{
   margin:0;padding:0;}
    .iw_poi_title {
   color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
    .iw_poi_content {
   font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=fucku&s=1"></script>
</head>

<body>
  <!--百度地图容器-->
  <div style="width: 100%;height: 500px; border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
	var httpRequest1 = new XMLHttpRequest();
	httpRequest1.open('GET', "http://www.libohao.com.cn/count/count/hrbyq.action", true);
	httpRequest1.send();
	
	var styleJson =
	[{
   
    "featureType": "land",
    "elementType": "geometry",
    "stylers": {
   
        "color": "#fffff9ff"
    }
}, {
   
    "featureType": "water",
    "elementType": "geometry",
    "stylers": {
   
        "color": "#69b0acff"
    }
}, {
   
    "featureType": "highway",
    "elementType": "geometry.fill",
    "stylers": {
   
        "color": "#b5caa0ff"
    }
}, {
   
    "featureType": "highway",
    "elementType": "geometry.stroke",
    "stylers": {
   
        "color": "#94ad79ff"
    }
}, {
   
    "featureType": "nationalway",
    "elementType": "geometry.fill",
    "stylers": {
   
        "color": "#b5caa0ff"
    }
}, {
   
    "featureType": "arterial",
    "elementType": "geometry.fill",
    "stylers": {
   
        "color": "#d4e2c6ff"
    }
}, {
   
    "featureType": "cityhighway",
    "elementType": "geometry.fill",
    "stylers": {
   
        "color": "#d4e2c6ff"
    }
}, {
   
    "featureType": "provincialway",
    "elementType": "geometry.fill",
    "stylers": {
   
        "color": "#d4e2c6ff"
    }
}, {
   
    "featureType": "provincialway",
    "elementType": "geometry.stroke",
    "stylers": {
   
        "color": "#b5caa0ff"
    }
}, {
   
    "featureType": "tertiaryway",
    "elementType": "geometry.fill",
    "stylers": {
   
        "color": "#ffffffff"
    }
}, {
   
    "featureType": "tertiaryway",
    "elementType": "geometry.stroke",
    "stylers": {
   
        "color": "#b5caa0ff"
    }
}, {
   
    "featureType": "fourlevelway",
    "elementType": "geometry.fill",
    "stylers": {
   
        "color": "#ffffffff"
    }
}, {
   
    "featureType": "fourlevelway",
    "elementType": "geometry.stroke",
    "stylers": {
   
        "color": "#b5caa0ff"
    }
}, {
   
    "featureType": "subway",
    "elementType": "geometry",
    "stylers": {
   
        "visibility": "off"
    }
}, {
   
    "featureType": "railway",
    "elementType": "geometry",
    "stylers": {
   
        "visibility": "off"
    }
}, {
   
    "featureType": "highwaysign",
    "elementType": "labels",
    "stylers": {
   
        "visibility": "off"
    }
}, {
   
    "featureType": "highwaysign",
    "elementType": "labels.icon",
    "stylers": {
   
        "visibility": "off"
    }
}, {
   
    "featureType": "nationalwaysign",
    "elementType": "labels",
    "stylers": {
   
        "visibility": "off"
    }
}, {
   
    "featureType": "nationalwaysign",
    "elementType": "labels.icon",
    "stylers": {
   
        "visibility": "off"
    }
}, {
   
    "featureType": "provincialwaysign",
    "elementType": "labels",
    "stylers": {
   
        "visibility": "off"
    }
}, {
   
    "featureType": "provincialwaysign",
    "elementType": "labels.icon",
    "stylers": {
   
        "visibility": "off"