我正在使用传单地图和googlemap图块。地图有时会工作，有时会说＆＃34; initMap不是函数＆＃34;。如果我刷新它再次，它再次正常工作。以下是供参考的代码。我正在使用firefox和chrome。问题主要发生在chrome中。请帮我解决这个问题..
<!DOCTYPE html>
<html>
<head>
<?php $this->load->view('header/header')?>
<!--<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvAEGxWQfQ9qZkUkGGd7NwL8K5oRWZ-Ts&callback=iniMap"
async defer></script>
<script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>-->
<link rel="stylesheet" href="<?php echo base_url()?>bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="<?php echo base_url()?>mapcss/leaflet.css" />
<script src="<?php echo base_url()?>mapjs/leaflet.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvAEGxWQfQ9qZkUkGGd7NwL8K5oRWZ-Ts&callback=initMap"
async defer></script>
<script src="<?php echo base_url()?>mapjs/leaflet-google.js""></script>
<script src="<?php echo base_url()?>bower_components/jquery/dist/jquery.min.js"></script>
<style>
.red{
color: red;
}
.leaflet-map-pane {
z-index: 2 !important;
}
.leaflet-google-layer {
z-index: 1 !important;
}
#basemaps-wrapper {
position: absolute;
top: 10px;
right: 10px;
z-index: 400;
background: white;
padding: 5px;
}
#button_setting{
position: absolute;
top: 50px;
right: 10px;
z-index: 400;
padding: 5px;
}
#show-button {
cursor: pointer;
}
#hide-button {
cursor: pointer;
display: none;
}
/*Some stylings to the buttons*/
#show-button, #hide-button {
color: #fff;
border-radius: 5px;
/*padding: 10px 50px; */
}
#show-button {
background: #28b463;
width: 60px;
}
#hide-button {
background: #af2303;
width: 60px;
}
</style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<?php $this->load->view('header/main_header')?>
<?php $this->load->view('menu/left_menu')?>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Vehicles
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li class="active">Dashboard</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<div style="width:1100px; height:500px" id="map">
<div id="basemaps-wrapper" class="leaflet-bar">
<select name="basemaps" id="basemaps" onChange="changeBasemap(basemaps)">
<option value="ROADMAP">ROADMAP</option>
<option value="SATELLITE">SATELLITE</option>
<option value="HYBRID">HYBRID</option>
<option value="TERRAIN">TERRAIN</option>
</select>
</div>
<div id="button_setting" class="leaflet-bar">
<button id="show-button" onclick="stop()">Replay</button>
<button id="hide-button" onclick="start()">Live</button>
</div>
</div>
<div>
<input type="hidden" name="base" id="base" value="<?php echo $base; ?>">
<input type="hidden" name="v_id" id="v_id" value="<?php echo $v_id; ?>">
</div>
<script type='text/javascript'>
var googleLay;
var googleLayer;
var m;
var baseurl = $("#base").val();
var vehicle_id;
var map;
function initMap(){
map = new L.Map('map');// {center: new L.LatLng(27.0696, 93.5508), zoom: 18});
googleLayer = new L.Google('ROADMAP');
map.addLayer(googleLayer);
googleLay = googleLayer;
m = map;
vehicle_id = $("#v_id").val();
get_location_data();
}
var marker;
var polyline;
var myIcon = L.icon({
iconUrl: baseurl + 'images/recycling-truk.png',
iconSize: [29, 24],
iconAnchor: [9, 21],
popupAnchor: [0, -14]
});
var timer = 0;
var polylinePoints = [];
var lat;
var lng;
function get_location_data(){
$.ajax({
url: baseurl + "vehicle/get_location_data",
dataType :"json",
data: {'v_id': vehicle_id},
type: "post",
success: function (data) {
//alert(data);
polylinePoints.length = 0;
for (var key in data) {
if (data.hasOwnProperty(key)) {
polylinePoints.push(new L.LatLng(data[key].latitude, data[key].longitude));
lat = data[key].latitude;
lng = data[key].longitude
}
}
set_polypoint();
}
});
timer = setTimeout(get_location_data, 7000);
}
function set_polypoint(){
var polylineOptions = {
color: 'blue',
weight: 6,
opacity: 0.9
};
polyline = new L.Polyline(polylinePoints, polylineOptions);
map.addLayer(polyline);
polyline.addTo(map);
if(marker){
map.removeLayer(marker);
}
marker = L.marker([lat, lng], {icon: myIcon}).addTo(map).bindPopup('<strong>Vehicle Code</strong><br>'+vehicle_id).openPopup();
map.setView([lat, lng], 18);
}
function stop() {
if (timer) {
clearTimeout(timer);
timer = 0;
}
/*if(marker){
map.removeLayer(marker);
}
if(polyline){
map.removeLayer(polyline);
}*/
for (i in map._layers) {
if (map._layers[i].options.format == undefined) {
try {
map.removeLayer(map._layers[i]);
} catch (e) {
console.log("problem with " + e + map._layers[i]);
}
}
}
map.addLayer(googleLayer);
}
function start() {
get_location_data();
}
function changeBasemap(basemaps){
var basemap = basemaps.value;
if (googleLay) {
m.removeLayer(googleLay);
}
googleLay = new L.Google(basemap);
m.addLayer(googleLay);
}
$(document).ready(function() {
$("#show-button").click(function () {
$("#hide-button").show()
$("#show-button").hide()
});
$("#hide-button").click(function () {
$("#show-button").show()
$("#hide-button").hide()
});
});
</script>
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<?php $this->load->view('footer/footer');?>
</div>
<!-- ./wrapper -->
</body>
<!-- DataTables -->
<script src="<?php echo base_url()?>bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="<?php echo base_url()?>bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- Select2 -->
<script src="<?php echo base_url()?>bower_components/select2/dist/js/select2.full.min.js"></script>
<!-- bootstrap datepicker -->
<script src="<?php echo base_url()?>bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
</html>