Javascript 谷歌地图渲染不正确
我是Gmap新手。我正在尝试在我的html中加载may map。但是只显示了一个灰色的div。请参见此图： 我知道有很多解决方案，我几乎都试过了。因为我认为这是因为在加载google地图时，我的dom没有完全加载。例如，我试图使用google.maps.event.addDomListener（窗口“加载”，初始化映射）； 但是我想要一些能够监听我的特定div的东西来加载，而不是我所有的html。 这是我的html：Javascript 谷歌地图渲染不正确,javascript,html,angularjs,google-maps,Javascript,Html,Angularjs,Google Maps,我是Gmap新手。我正在尝试在我的html中加载may map。但是只显示了一个灰色的div。请参见此图： 我知道有很多解决方案，我几乎都试过了。因为我认为这是因为在加载google地图时，我的dom没有完全加载。例如，我试图使用google.maps.event.addDomListener（窗口“加载”，初始化映射）； 但是我想要一些能够监听我的特定div的东西来加载，而不是我所有的html。 这是我的html： <div ng-init=initMainMap()>
<div ng-init=initMainMap()>
<div ng-show="selectMap" class="row" id="mapLoaded">
<!--<div class="sevenmargin" ng-include="'view/getAddress.html'"></div>-->
<!--<div id="yourMap"></div>-->
<div id="mapGoogle" style="height: 800px;
width: 1000px;
margin-right: 2%;
overflow: hidden;"></div>
<br>
<div class="form-group row">
<label class="col-lg-2 col-form-label">آدرس </label>
<div class="col-lg-10 input-group-check"
valid="{{!account.buy_address_map.$invalid}}">
<input type="text" name="buy_address_map" ng-model="buy_address_map"
ng-minlength="3" class="form-control controlinput"
placeholder="آدرس ">
</div>
</div>
</div>
</div>
آدرس
$scope.initMainMap = function () {
$scope.getFavoriteAddress()
var marker;
$scope.buy_address_map;
$scope.myLatLng = new google.maps.LatLng(32.64654244393823,51.66769295233155)
var shopLatLng = {
lat: parseFloat(JSON.parse(localStorage.getItem('shop_lat'))),
lng: parseFloat(JSON.parse(localStorage.getItem('shop_long')))
};
// var map = null;
var geocoder = null;
var directionsService = null;
var info;
var marker;
var mapOptions = {
center: shopLatLng,
zoom: 13,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('mapGoogle'), mapOptions)
geocoder = new google.maps.Geocoder();
google.maps.event.addListenerOnce(map, 'idle', function(){
console.log("loaded")
});
//////// muliple autoroute multiple waypoints, multiple service //////////////
var routeService = "GOOGLE" //or OSM_YOURS
var routeMode = "drive" //bicycle, foot, ,motorcar //Google = BICYCLING
var routeMarkers = []; // for route legs/steps
var routeMarkersArray = []; //keep all routemarkers of differnt routes
var routeLinesArray = []; //keep all routeLines of differnt routes
addMarker(shopLatLng, false)
var setRM = 0;
setRouteMarker()
function setRouteMarker() {
if (setRM == 0) { //start a new route
// var prop = {};
// prop.style.color = "red";
// prop.style.fontWeight = "bold";
var temp = google.maps.event.addListener(map, 'click', function (event) {
addMarker(event.latLng, true)
});
directionsService = new google.maps.DirectionsService();
map.setOptions({draggableCursor: 'crosshair'});
setRM = 1;
} else { //finish a route
map.setOptions({draggableCursor: null});
google.maps.event.removeListener(temp);
routeMarkersArray.push(routeMarkers)
routeMarkers = [];
routeLinesArray.push(routeLines)
routeLinesArray = [];
var routeKM = 0;
setRM = 0;
}
}
var pinRed = {
url: 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png',
};
var pinYellow = {
url: 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_yellow.png',
};
// OSM YOURS DIRECTION Service//
function addMarker(latlng, drag) {
var mTitle = "wp: " + routeMarkers.length;
marker = new google.maps.Marker({
position: latlng,
icon: pinRed,
map: map,
//title: mTitle, //latlng.toUrlValue(6),
draggable: drag
})
marker.uid = routeMarkers.length;
addRouteMarkerListener();
routeMarkers.push(marker);
routeService = "GOOGLE"
routeMode = "drive";
if (routeMarkers.length > 1) {
if (routeService == "GOOGLE") {
calcGoogleRoute()
}
;
}
}
function addRouteMarkerListener() {
google.maps.event.addListener(marker, 'dragend', function (e) {
uid = this.uid;
console.log("wp:" + uid);
if (uid > 0) { //move route for middle and last marker
console.log("Route1")
moveRoute(uid - 1); // call sube for calc
if (uid < routeMarkers.length - 1) {
moveRoute(uid);
}
}
//move route for first point
if (uid == 0) {
routeLine = routeLines[0];
routeKM = routeKM - routeLine.km
routeLine.setMap(null);
if (routeService == "GOOGLE") {
calcGoogleRoute(1)
}
;
}
}); //< dragend
google.maps.event.addListener(marker, 'rightclick', function (e) {
uid = this.uid;
console.log("remove wp:" + uid);
if (uid == 0) {
console.log("do nothing")
}
else if (uid == routeMarkers.length - 1) {
routeMarkers[uid].setMap(null);
routeMarkers.splice(uid, 1); //delete first element
routeLine = routeLines[uid - 1];
routeKM = routeKM - routeLine.km
routeLine.setMap(null);
if (routeLines.length == 1) {
routeLines = [];
routeKM = 0;
// info.innerHTML = routeKM + " km / " + routeMarkers.length + " wpts";
} else {
routeLines.splice(uid - 1, 1);
}
}
// middle Marker (uid), del route before and after (uid - 1), calc new route
if (uid > 0 && uid < routeMarkers.length - 1) {
routeMarkers[uid].setMap(null);
routeMarkers.splice(uid, 1); //delete first element
//entfernt nachfolgende Route
console.log("Del nachfolgende Route: " + uid + " von gesamt Routen: " + routeLines.length)
routeLine = routeLines[uid];
routeKM = routeKM - routeLine.km
routeLine.setMap(null);
routeLines.splice(uid, 1);
renumber();
console.log("Del/Replace vorhergehende Route: " + (uid - 1) + " von gesamt Routen: " + routeLines.length);
routeLine = routeLines[uid - 1];
routeKM = routeKM - routeLine.km
routeLine.setMap(null);
console.log("calc neue Route: " + (uid - 1));
if (routeService == "GOOGLE") {
calcGoogleRoute(uid)
}
;
}
}); //< rightclick
} //< end routeMarkerListener
function renumber() {
console.log("renumber");
for (var i = 0; i < routeMarkers.length; i++) {
console.log("renumber Marker:" + i);
routeMarkers[i].uid = i;
routeMarkers[i].setTitle = "wp: " + i;
}
for (var i = 0; i < routeLines.length; i++) {
console.log("renumber Lines: " + i);
routeLine = routeLines[i]
routeLines.uid = i;
}
}
function moveRoute(uid) { //sub for dragend routemarker
console.log("Route2"); //routline after Marker
routeLine = routeLines[uid];
routeKM = routeKM - routeLine.km;
routeLine.setMap(null);
if (routeService == "GOOGLE") {
calcGoogleRoute(uid + 1)
}
;
}
function wait(ms) { //not in use
var start = new Date().getTime();
var end = start;
while (end < start + ms) {
end = new Date().getTime();
}
}
function httpGet(theUrl) {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", theUrl, false); //asyncron = true doesn't work correct.
xhttp.send();
var result = xhttp.responseText;
console.log("result", result)
return result;
//Notes from:http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
//Using async=false is not recommended, but for a few small requests this can be ok.
//Remember that the JavaScript will NOT continue to execute, until the server response is ready.
//If the server is busy or slow, the application will hang or stop.
//Note: When you use async=false, do NOT write an onreadystatechange function -
// just put the code after the send() statement:
}
function calcGoogleRoute(index) {
if (typeof(index) == 'undefined') {
index = "new";
var rStart = routeMarkers[routeMarkers.length - 2].getPosition();
var rEnd = routeMarkers[routeMarkers.length - 1].getPosition();
} else {
var rStart = routeMarkers[index - 1].getPosition();
var rEnd = routeMarkers[index - 0].getPosition();
}
request = {
origin: rStart,
destination: rEnd
};
if (routeMode == "drive") {
request.travelMode = google.maps.DirectionsTravelMode.DRIVING
}
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
path = result.routes[0].overview_path
var sumKM = 0;
var sumTime = 0;
var myroute = result.routes[0];
for (var i = 0; i < myroute.legs.length; i++) {
sumKM += myroute.legs[i].distance.value;
sumTime += myroute.legs[i].duration.value;
}
sumKM = sumKM / 1000;
console.log("Route calculated, write the route")
writeRoute(path, sumKM, index, sumTime)
} else if (status == google.maps.DirectionsStatus.ZERO_RESULTS) {
// alert("Could not find a route between these points");
} else {
// alert("Directions request failed");
}
});
}
var routeLine = null;
var routeLines = [];
var routeKM = 0;
var routeTime = 0;
function writeRoute(path, routekm, index, routetime) {
console.log("Write Route: " + (index - 1));
color = "grey"
if (routeService == "GOOGLE") {
color = 'blue'
}
;
if (routeService == "OSM_YOURS") {
color = 'grey'
}
;
var polyOptions = {
map: map,
path: path,
strokeColor: color,
strokeOpacity: 1.0,
strokeWeight: 3,
editable: false
};
routeLine = new google.maps.Polyline(polyOptions);
routeLine.km = routekm;
routeLine.service = routeService;
routeLine.mode = routeMode;
routeLine.uid = routeLines.length;
addRouteLineListener();
if (index == "new") {
console.log("new route:" + (routeLines.length));
routeLines.push(routeLine);
} else {
console.log("replace route:" + (index - 1));
routeLine.uid = index - 1;
routeLines[index - 1] = routeLine;
}
routeKM += routekm;
routeTime += routetime;
//u r ganna need this
// info.innerHTML = routeKM + " km / " + routeMarkers.length + " wpts / " + routeTime + " time";
var distance = routekm;
console.log("distance", distance);
}
var tempMarker = null;
function addRouteLineListener() {
google.maps.event.addListener(routeLine, 'click', function (event) {
//set temp marker and save route line id
lid = this.uid
latlng = event.latLng
geocoder.geocode({'latLng': latlng}, function (results, status) {
console.log("result for geocode", results[0].formatted_address)
if (status == google.maps.GeocoderStatus.Ok) {
if (result[0]) {
$('#latitude,#longitude').show();
$('#address').val(results[0].formatted_address);
$('#latitude').val(marker.getPosition().lat());
$('#longitude').val(marker.getPosition().lng());
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
$scope.buy_address_map = results[0].formatted_address
}
}
});
if (tempMarker) tempMarker.setMap(null);
tempMarker = new google.maps.Marker({
position: latlng,
icon: pinYellow,
map: map,
title: "Remove to insert Route",
draggable: true
})
tempMarker.lid = lid;
// set listener for temp marker
// rightclick del tempmarker
google.maps.event.addListener(tempMarker, 'rightclick', function () {
tempMarker.setMap(null);
})
//dragend replace temmarker und calc inserted routes
google.maps.event.addListener(tempMarker, 'dragend', function (e) {
//replace marker
lid = this.lid
latlng = e.latLng
if (tempMarker) tempMarker.setMap(null);
marker = new google.maps.Marker({
position: latlng,
icon: pinRed,
map: map,
//title: mTitle, //latlng.toUrlValue(6),
draggable: true
})
marker.uid = lid + 1;
addRouteMarkerListener();
routeMarkers.splice(lid + 1, 0, marker);
renumber();
// write first route
routeLine = routeLines[lid];
routeKM = routeKM - routeLine.km
routeLine.setMap(null);
routeService = document.getElementById("rtService").value;
routeMode = document.getElementById("rtMode").value;
if (routeService == "GOOGLE") {
calcGoogleRoute(lid + 1)
}
;
// write second route
routeLines.splice(lid + 1, 0, routeLines[lid]); //insert new item
renumber();
if (routeService == "GOOGLE") {
calcGoogleRoute(lid + 2)
}
;
console.log("routlines: " + routeLines.length);
})
});
}
}
$scope.initMainMap=函数（）{
$scope.getFavoriteAddress（）
var标记；
$scope.buy\地址\地图；
$scope.myLatLng=new google.maps.LatLng（32.64654244393823,51.66769295233155）
var shopLatLng={
lat:parseFloat（JSON.parse（localStorage.getItem（'shop_lat'）），
lng:parseFloat（JSON.parse（localStorage.getItem（'shop_long'））
};
//var-map=null；
var-geocoder=null；
var directionsService=null；
var信息；
var标记；
变量映射选项={
中心：购物中心，
缩放：13，
mapTypeControl:false，
街景控制：错误，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（'mapGoogle'）、mapOptions）
geocoder=新的google.maps.geocoder（）；
google.maps.event.addListenerOnce（map'idle'，function（）{
控制台日志（“已加载”）
});
////////多自动路线多航路点，多服务//////////////
var routeService=“谷歌”//或OSM\u您的
var routeMode=“drive”/bicycle，foot，motorcar//Google=骑自行车
var routeMarkers=[]；//用于路线分支/步骤
var RouteMarkerArray=[]；//保留不同路由的所有RouteMarker
var routeLinesArray=[]；//保留不同路由的所有路由
addMarker（购物，假）
var-setRM=0；
setRouteMarker（）
函数setRouteMarker（）{
如果（setRM==0）{//启动新路由
//var prop={}；
//prop.style.color=“红色”；
//prop.style.fontwweight=“bold”；
var temp=google.maps.event.addListener（映射，'click'，函数（事件）{
添加标记（event.latLng，true）
});
directionsService=new google.maps.directionsService（）；
setOptions（{draggableCursor:'crosshair'}）；
setRM=1；
}否则{//完成一条路线
setOptions（{draggableCursor:null}）；
google.maps.event.removeListener（temp）；
routeMarkersArray.push（routeMarkers）
路由标记=[]；
路线排列。推（路线）
路由阵列=[]；
var-routeKM=0；
setRM=0；
}
}
var pinRed={
网址：'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png',
};
变量pinYellow={
网址：'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_yellow.png',
};
//你的方向服务//
功能添加标记（板条、拖动）{
var mTitle=“wp:”+routeMarkers.length；
marker=新的google.maps.marker({
位置：latlng，
图标：品红色，
地图：地图，
//标题：mTitle，//latlng.toUrlValue（6），
可拖动：拖动
})
marker.uid=routeMarkers.length；
addRouteMarkerListener（）；
路线标记器。推（标记器）；
routeService=“谷歌”
routeMode=“驱动器”；
如果（routeMarkers.length>1）{
如果（routeService==“谷歌”）{
calcGoogleRoute（）
}
;
}
}
函数addRouteMarkerListener（）{
google.maps.event.addListener（标记'dragend'，函数（e）{
uid=this.uid；
console.log（“wp:+uid”）；
如果（uid>0）{//移动中间和最后一个标记的路径
控制台日志（“路由1”）
moveRoute（uid-1）；//调用sube进行计算
如果（uid