百度地圖JavaScript API添加自定義Marker
官網(wǎng)指導(dǎo)添加自定義Marker
實(shí)際使用中發(fā)現(xiàn)無(wú)法顯示圖標(biāo)，找了一些博客
百度地圖開(kāi)發(fā)自定義圖標(biāo)無(wú)法顯示的問(wèn)題
百度地圖自定義圖標(biāo)不顯示問(wèn)題解決方案
關(guān)于百度地圖開(kāi)放平臺(tái)api覆蓋物“自定義Marker圖標(biāo)”不能正常顯示的解決方案
百度電子地圖自定義marker圖標(biāo)
百度地圖api設(shè)置點(diǎn)的自定義圖標(biāo)不顯示
總結(jié)下來(lái)可能是下面的問(wèn)題：
- 圖片路徑為本地路徑時(shí)，需要調(diào)用
require() -
icon內(nèi)的size大小應(yīng)與圖標(biāo)原大小必須一致 - 本地靜態(tài)路徑的圖片無(wú)法顯示，
url圖片連接能夠顯示
經(jīng)測(cè)試確實(shí)是本地靜態(tài)路徑圖片無(wú)法顯示，需要用url圖片鏈接，可以在下面的網(wǎng)站獲取
圖標(biāo)、插圖、照片、音樂(lè)和設(shè)計(jì)工具
<img src="https://img.icons8.com/office/40/null/car.png"/>
marker.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>添加Marker </title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=YOZpUSe1LVaCoKEUqGesVdKaRs1AbK9o"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMapGL.Map("container"); // 創(chuàng)建地圖實(shí)例
var point = new BMapGL.Point(116.404, 39.915); // 創(chuàng)建點(diǎn)坐標(biāo)
map.centerAndZoom(point, 15); // 初始化地圖，設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
map.enableScrollWheelZoom(true); //開(kāi)啟鼠標(biāo)滾輪縮放
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加縮放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
map.addControl(cityCtrl);
// 創(chuàng)建定位控件
var locationControl = new BMapGL.LocationControl({
// 控件的?？课恢茫蛇x，默認(rèn)左上角）
anchor: BMAP_ANCHOR_TOP_RIGHT,
// 控件基于?？课恢玫钠屏浚蛇x）
offset: new BMapGL.Size(20, 20)
});
// 將控件添加到地圖上
map.addControl(locationControl);
// 添加定位事件
locationControl.addEventListener("locationSuccess", function(e){
var address = '';
address += e.addressComponent.province;
address += e.addressComponent.city;
address += e.addressComponent.district;
address += e.addressComponent.street;
address += e.addressComponent.streetNumber;
alert("當(dāng)前定位地址為：" + address);
});
// var myIcon = new BMapGL.Icon(require('./a-40.png'), new BMapGL.size(48, 48));
var myIcon = new BMapGL.Icon("https://img.icons8.com/office/40/null/car.png", new BMapGL.Size(50,50));
var pt = new BMapGL.Point(116.417, 39.909);
var marker = new BMapGL.Marker(pt, {icon: myIcon});
//var marker = new BMapGL.Marker(pt);
map.addOverlay(marker);
var opts = {
width: 200,
height: 100,
title: 'RedWallBot'
};
var info = new String("這是我們完全自主研發(fā)的全方位移動(dòng)機(jī)器人哦！");
var infoWindow = new BMapGL.InfoWindow(info, opts);
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow, pt);
});
</script>
</body>
</html>
效果如下文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-471421.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-471421.html
到了這里，關(guān)于百度地圖JavaScript API添加自定義Marker的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
