87,901
社区成员
发帖
与我相关
我的任务
分享
var container;
(function () {
debugger;
document.body.innerHTML = '<div id="container"></div>';
container = document.getElementById('container');
})();
(function() {
container.addEventListener("DOMNodeInserted", function(e) {
e = e || event;
var target = e.target;
if (target && e.target.src) {
if (target.src.indexOf("https://ss1.baidu.com") >= 0) {
target.src = target.src.replace(
"https://ss1.baidu.com",
"https://ss0.baidu.com"
);
}
}
});
})();
(function() {
debugger;
container.innerHTML =
'<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1258876876,645640263&fm=173&s=97A088AA44CB34E84E31C8B303005005&w=218&h=146&img.JPEG"/><br/><img src="https://ss1.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1963492293,1129115862&fm=173&s=FD814B9ECED919CC6ABA2BB30300E01E&w=218&h=146&img.JPEG"/>';
})();
在线地址: https://codepen.io/raisezhang/pen/BwboYP
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Directions service</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
#panel {
position: absolute;
width:300px;
height:800px;
right:10px;
top:10px;
border: solid 2px blue;
background:white;
}
#panel1 {
position: absolute;
width:300px;
height:800px;
left:10px;
top:10px;
border: solid 2px blue;
background:white;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="floating-panel">
<b>Start: </b>
<select id="start">
<option value="chicago, il">Chicago</option>
<option value="st louis, mo">St Louis</option>
<option value="joplin, mo">Joplin, MO</option>
<option value="oklahoma city, ok">Oklahoma City</option>
<option value="amarillo, tx">Amarillo</option>
<option value="gallup, nm">Gallup, NM</option>
<option value="flagstaff, az">Flagstaff, AZ</option>
<option value="winona, az">Winona</option>
<option value="kingman, az">Kingman</option>
<option value="barstow, ca">Barstow</option>
<option value="san bernardino, ca">San Bernardino</option>
<option value="los angeles, ca">Los Angeles</option>
</select>
<b>End: </b>
<select id="end">
<option value="chicago, il">Chicago</option>
<option value="st louis, mo">St Louis</option>
<option value="joplin, mo">Joplin, MO</option>
<option value="oklahoma city, ok">Oklahoma City</option>
<option value="amarillo, tx">Amarillo</option>
<option value="gallup, nm">Gallup, NM</option>
<option value="flagstaff, az">Flagstaff, AZ</option>
<option value="winona, az">Winona</option>
<option value="kingman, az">Kingman</option>
<option value="barstow, ca">Barstow</option>
<option value="san bernardino, ca">San Bernardino</option>
<option value="los angeles, ca">Los Angeles</option>
</select>
<button id="btn">C</button>
</div>
<div id="map">
</div>
<div id="panel"></div>
<script>
var directionsService;
var map;
function initMap() {
directionsService = new google.maps.DirectionsService;
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 41.85, lng: -87.65}
});
calculateAndDisplayRoute();
}
function calculateAndDisplayRoute() {
var r={
//origin: document.getElementById('start').value,
//destination: document.getElementById('end').value,
origin: '1 Austin Terrace at Spadina Ave, Toronto, Ontario M5R 1X8, Canada',
destination: '108 Chestnut Street, Toronto, Ontario, M5G1R3, Canada',
travelMode: 'TRANSIT'
};
r.provideRouteAlternatives=true;
directionsService.route(r, function(response, status) {
if (status === 'OK') {
console.log(response);
console.log(response.routes.length);
var directionsDisplay= new google.maps.DirectionsRenderer;
directionsDisplay.setMap(map);
directionsDisplay.setDirections(response);
//上面这句会加载三个.com的图标资源:
//http://mt.googleapis.com/maps/vt/icon/name=icons/spotlight/spotlight-waypoint-a.png&text=A&psize=16&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1
//http://mt.google.cn/maps/vt/icon/name=icons/spotlight/spotlight-waypoint-a.png&text=A&psize=16&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1
//http://maps.gstatic.com/mapfiles/transit/iw2/6/bus2.png
//这几个图标加载不了,只需mt.googleapis.com 改成 mt.google.cn,maps.gstatic.com 改成 maps.gstatic.cn 就能正常显示。问题是怎么改,这三个图标资源
//不是img要素,是json里面的icon,改API应该不可能,唯一的解决方案可能是截获页面的http请求,改图标的url。
directionsDisplay.setPanel(document.getElementById('panel'));
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
</script>
<script async defer
src="http://ditu.google.cn/maps/api/js?region=cn&language=zh-CN&callback=initMap">
</script>
</body>
</html>
Object.defineProperty(HTMLImageElement.prototype,'src',{
set(value){
alert(value)
}
});
你先把这段代码加到你代码的最开始位置 看能监听到所有的img的src赋值吗