Jquery Google Map不会加载 [英] Jquery Google Map wont Load
本文介绍了Jquery Google Map不会加载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
帮助我想制作一个地图，我们可以用jquery编辑和保存标记但是当我完成它时，我的地图不会加载。加上当我在Developer工具上检查我的代码时，我收到此消息Uncaught ReferenceError：$ is not defined。请帮助谢谢
这是我的代码：
help i want to make a map where we can edit and save markers with jquery but when i finished it,my map wont load. plus when i checked my code on Developer tools i got this message "Uncaught ReferenceError: $ is not defined " .please help thank you
this is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://www.google.com/jsapi?key=AIzaSyBw7b8lMbX80IG_WviZAJBtI9rI_vxjcDU">
<script type="text/javascript"charset="utf-8">google.load("maps","2.x"); google.load("jquery","1.3.1");</script>
<script type="text/javascript">
$(document).ready(function() {
var mapCenter = new google.maps.LatLng(47.6145, -122.3418); //Google map Coordinates
var map;
map_initialize(); // initialize google map
//############### Google Map Initialize ##############
function map_initialize()
{
var googleMapOptions =
{
center: mapCenter, // map center
zoom: 17, //zoom level, 0 = earth view to higher value
panControl: true, //enable pan Control
zoomControl: true, //enable zoom control
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL //zoom control size
},
scaleControl: true, // enable scale control
mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
};
map = new google.maps.Map(document.getElementById("map-canvas"), googleMapOptions);
//Load Markers from the XML File, Check (map_process.php)
$.get("map_process.php", function (data) {
$(data).find("marker").each(function () {
//Get user input values for the marker from the form
var name = $(this).attr('name');
var address = ''+ $(this).attr('address') +'';
var type = $(this).attr('type');
var point = new google.maps.LatLng(parseFloat($(this).attr('lat')),parseFloat($(this).attr('lng')));
//call create_marker() function for xml loaded maker
create_marker(point, name, address, false, false, false, "http://mapicons.nicolasmollet.com/wp-content/uploads/mapicons/shape-default/color-eb2828/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/stop.png");
});
});
//drop a new marker on right click
google.maps.event.addListener(map, 'rightclick', function(event) {
//Edit form to be displayed with new marker
var EditForm = ''+
'<form action="ajax-save.php" method="POST" name="SaveMarker" id="SaveMarker">'+
'<label for="pName">Place Name :<input type="text" name="pName" class="save-name" placeholder="Enter Title" maxlength="40" /></label>'+
'<label for="pDesc">Description :<textarea name="pDesc" class="save-desc" placeholder="Enter Address" maxlength="150"></textarea></label>'+
'<label for="pType">Type : <select name="pType" class="save-type"><option value="restaurant">Rastaurant</option><option value="bar">Bar</option>'+
'<option value="house">House</option></select></label>'+
'</form>'+
'<button name="save-marker" class="save-marker">Save Marker Details</button>';
//call create_marker() function
create_marker(event.latLng, 'New Marker', EditForm, true, true, true, "http://mapicons.nicolasmollet.com/wp-content/uploads/mapicons/shape-default/color-eb2828/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/stop.png");
});
}
});
</script>
<style>
html, body, #map_canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
position: relative;
}
</style>
<head>
<body>
<<;h1> class="heading">My Google Map<</h1>>
<<div> align="center">Right Click to Drop a New Marker<</div>>
<<div >id="map-canvas" style="height:100%"><</div>>
</body>
</html>
推荐答案
未定义。请帮助谢谢
这是我的代码：
is not defined " .please help thank you
this is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://www.google.com/jsapi?key=AIzaSyBw7b8lMbX80IG_WviZAJBtI9rI_vxjcDU">
<script type="text/javascript"charset="utf-8">google.load("maps","2.x"); google.load("jquery","1.3.1");</script>
<script type="text/javascript">
（ document ）。ready（ function （）{
var mapCenter = new google.maps.LatLng（ 47 。 6145 ， - 122。 3418 ）; // Google地图坐标
var map;
map_initialize（）; // 初始化谷歌地图
// ############### Google Map Initialize ############## / span>
function map_initialize（）
{
var googleMapOptions =
{
center：mapCenter， // 地图中心
zoom： 17 ， // 缩放级别，0 =地球查看更高的值
panControl： true ， // 启用平移控制
zoomControl： true ， // 启用缩放控制
zoomControlOptions：{
style：google.maps.ZoomControlStyle.SMALL // 缩放控件大小
}，
scaleControl： true ， // 启用比例控制
mapTypeId：google.maps.MapTypeId.ROADMAP // 谷歌地图类型
};
map = new google.maps。地图（ document .getElementById（ map-canvas），googleMapOptions） ;
// 从XML文件加载标记，检查（map_process.php）
(document).ready(function() { var mapCenter = new google.maps.LatLng(47.6145, -122.3418); //Google map Coordinates var map; map_initialize(); // initialize google map //############### Google Map Initialize ############## function map_initialize() { var googleMapOptions = { center: mapCenter, // map center zoom: 17, //zoom level, 0 = earth view to higher value panControl: true, //enable pan Control zoomControl: true, //enable zoom control zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL //zoom control size }, scaleControl: true, // enable scale control mapTypeId: google.maps.MapTypeId.ROADMAP // google map type }; map = new google.maps.Map(document.getElementById("map-canvas"), googleMapOptions); //Load Markers from the XML File, Check (map_process.php)
.get（ map_process.php，< span class =code-keyword> function （data）{
.get("map_process.php", function (data) {
这篇关于Jquery Google Map不会加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
